BEFORE WE START... You should know about, WebConf@2013 ROCK!!! Baby don't go if you're in the wrong session. Do not loudly if you have been reading the slide. Do not snore if you are asleep. Thank you all for join this session! http://webconf.hinablue.me/2013
WHAT IS MEDIA QUERY ? CSS3 bring awesome new part! Vary simple way to feed different CSS based on characteristic users' device. Make us to re-think about "device". Maybe easy to retrofix existing design.
ABOUT @MEDIA There are 3 way to go, 1. @media with tag 2. @media with CSS 3. @media with @import 㫪㫣㫠㫥㫢㫔㫩㫜㫣㫫㫔㫪㫫㫰㫣㫜㫪㫟㫜㫜㫫㫔㫔㫤㫜㫛㫠㫘㫫㫔㫪㫚㫩㫜㫜㫥㫔㫔㫟㫩㫜㫝㫫㫔㫜㫜㫜㫔㫬 㫮㫤㫜㫛㫠㫘㫔㫪㫚㫩㫜㫜㫥㫔㫲㫔㫜㫜㫜㫔㫴 㫮㫠㫤㫧㫦㫩㫫㫔㫬㫩㫣㫖㫪㫚㫩㫜㫜㫥㫜㫚㫪㫪㫗㫔㫪㫚㫩㫜㫜㫥㫩
@MEDIA EXPRESSIONS screen and ( max-width: 480px ) only screen and ( max-width: 768px ) not screen and ( max-width: 1024px ) screen, projection unknown value will equal to "not all"
@MEDIA PROPERTIES UNIT width, height use px, pt, pc, cm, mm, in ratio use width/height, ie. 1024/768, 16/9 color, monochrome use number, ie. 1, 2, 3... etc. resolution use dpi, dpcm orientation only portrait and landscape are valid value scan only progressive and interlace are valid value grid only 0 and 1 are vaild value
WHEN @MEDIA ACTUALLY WORK ? Correct device with @media Expressions or properties matched "not all" 㫮㫤㫜㫛㫠㫘㫔㫦㫥㫣㫰㫔㫪㫚㫩㫜㫜㫥㫔㫘㫥㫛㫔㫖㫔㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫢㫦㫞㫧㫯㫔㫗 㫮㫤㫜㫛㫠㫘㫔㫖㫔㫤㫠㫥㫛㫮㫠㫛㫫㫟㫨㫔㫥㫤㫦㫧㫯㫔㫗㫔㫘㫥㫛㫔㫖㫔㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫟㫞㫠㫢㫧㫯㫔㫗 㫮㫤㫜㫛㫠㫘㫔㫫㫜㫪㫫
WHY WE TALK ABOUT DENSITY ? @media work based on @viewport rule. Mobile devices has lots of resolution. 㫮㫭㫠㫜㫮㫧㫦㫩㫫㫔㫲 㫔㫔㫔㫔㫮㫠㫛㫫㫟㫨㫔㫢㫞㫞㫧㫯㫩 㫴 㫮㫤㫜㫛㫠㫘㫔㫦㫥㫣㫰㫔㫪㫚㫩㫜㫜㫥㫔㫘㫥㫛㫔㫖㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫢㫦㫞㫧㫯㫗㫔㫲㫔㫜㫜㫜㫔㫴 㫮㫤㫜㫛㫠㫘㫔㫖㫔㫛㫮㫜㫙㫢㫠㫫㫛㫤㫠㫥㫛㫛㫜㫭㫠㫚㫜㫛㫧㫠㫯㫜㫣㫛㫩㫘㫫㫠㫦㫨㫔㫠㫔㫗㫔㫲 㫔㫔㫔㫔㫝㫘㫔㫠㫗㫟㫦㫥㫜㫢㫔㫘㫝 㫴
WHY WE CONSIDER THE DENSITY ? In the mobile device (ie. iPhone4), screen resolution is 640x960 that specification say so. So, can we use @media ( max-width: 640px ) to do our job? NO. You should use @media ( max-width: 320px ) cause the device-pixel-ratio is 2.
“ As an example, if your page had an image that was 100px by 100px, you'd provide an image that was 200px by 200px, but specify in CSS or as an attribute in HTML that it is 100px by 100px. The reason this works is that a pixel on the screen is not the same as a CSS pixel. This is a good thing, because otherwise as I say, things would be tiny. --Rich Bradshaw ” Pixel density, retina display and font-size in CSS
I DON'T WANT TO DO MATH ! Use "dppx", "vw", "vh" Resolution Units 㫟㫛㫧㫧㫯㫔㫠㫪㫔㫜㫨㫬㫠㫭㫘㫣㫜㫥㫫㫔㫫㫦㫔㫧㫤㫛㫧㫠㫜 Viewport percentage lengthes 㫟㫭㫮㫔㫠㫪㫔㫜㫨㫬㫠㫭㫘㫣㫜㫥㫫㫔㫫㫦㫔㫡㫠㫧㫯㫚㫔㫠㫝㫔㫮㫠㫛㫫㫟㫔㫦㫝㫔㫫㫟㫜㫔㫭㫠㫜㫮㫧㫦㫩㫫㫔㫠㫪㫔㫡㫠㫞㫧㫯㫜
START WITH DESKTOP STYLES Good parts Easy to start or retrofit existing design IE 6-8 may work correctly without extra work Otherwise Requests Javascript or style to support mobile design in IE Mobile or other mobile browsers
START WITH MOBILE STYLES Good parts Non-support media query browsers still get the mobile style Mobile device will not downloading unneeded desktop style Otherwise Requests Javascript or style to support IE 6-8 to make it work correctly
WHAT'S QUERY WE HAVE ? total 105 lines in SASS 㫮㫤㫜㫛㫠㫘㫔㫖㫔㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫣㫣㫡㫧㫯㫔㫗 㫮㫤㫜㫛㫠㫘㫔㫖㫔㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫢㫦㫞㫧㫯㫔㫗 㫮㫤㫜㫛㫠㫘㫔㫖㫔㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫢㫢㫞㫧㫯㫔㫗 㫮㫤㫜㫛㫠㫘㫔㫖㫔㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫡㫠㫞㫧㫯㫔㫗 㫮㫤㫜㫛㫠㫘㫔㫖㫔㫤㫠㫥㫛㫮㫠㫛㫫㫟㫨㫔㫥㫤㫦㫧㫯㫔㫗㫔㫘㫥㫛㫔㫖㫔㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫧㫥㫧㫧㫯㫔㫗 㫮㫤㫜㫛㫠㫘㫔㫖㫔㫤㫠㫥㫛㫮㫠㫛㫫㫟㫨㫔㫧㫦㫞㫧㫯㫔㫗 㫮㫤㫜㫛㫠㫘㫔㫖㫔㫤㫠㫥㫛㫮㫠㫛㫫㫟㫨㫔㫟㫞㫦㫞㫧㫯㫔㫗
THE QUERY REALLY DO IS... Make special size of your elements to fit the layout. 㫭㫘㫩㫔㫧㫩㫦㫤㫠㫪㫜㫔㫫㫔㫛㫦㫚㫬㫤㫜㫥㫫㫜㫙㫦㫛㫰㫜㫦㫝㫝㫪㫜㫫㫘㫠㫛㫫㫟㫔㫳㫳㫔㫛㫦㫚㫬㫤㫜㫥㫫㫜㫛㫦㫚㫬㫤㫜㫥㫫㫘㫣㫜㫤㫜㫥㫫㫜㫦㫝㫝㫪㫜㫫㫘㫠㫛㫫㫟㫔 㫳㫳㫔㫮㫠㫥㫛㫦㫮㫜㫠㫥㫥㫜㫩㫘㫠㫛㫫㫟㫩 㫠㫝㫔㫖㫔㫧㫩㫦㫤㫠㫪㫜㫔㫫㫫㫔㫤㫡㫡㫔㫗㫔㫲 㫔㫔㫔㫔㫝㫘㫔㫗㫦㫔㫰㫦㫬㫩㫔㫪㫧㫜㫚㫠㫘㫣㫔㫨㫬㫜㫩㫰㫔㫟㫜㫩㫜㫜㫔㫘㫝 㫴㫔㫜㫣㫪㫜㫔㫲 㫔㫔㫔㫔㫝㫘㫔㫙㫠㫞㫟㫫㫔㫮㫠㫫㫟㫔㫰㫦㫬㫩㫔㫗㫗㫚㫔㫘㫥㫛㫔㫗㫘㫘㫗㫔㫯㫘㫗㫗㫘㫜㫔㫘㫝 㫴
START WITH DESKTOP STYLES ? Actually, we tried, and we failed. Retrofit existing design is too difficult. Original design is NOT content first. Visual design cannot reuse in the narrow styles. Alomst overwriting all the style we have. Vary hard to fine tune in the mobile device. We do REALLY not want to test Android devices.
WHAT IS @VIEWPORT ? show your layout in the viewable area. zoom in/out your layout with client behavior. fit some rules with the device. @media depends on @viewport size.
WHAT THE @VIEWPORT DO ? initial viewport Initial some properties which the device really have and IT IS READ-ONLY. In the other word, it called "visual viewport". actual viewport After initial viewport, this is the rules you setting in the viewport, in the other word, it called "layout viewport".
OK, JUST COPY AND PASTE html5-boilerplate or this one, or this one, 㫪㫤㫜㫫㫘㫔㫥㫘㫤㫜㫫㫔㫭㫠㫜㫮㫧㫦㫩㫫㫔㫔㫚㫦㫥㫫㫜㫥㫫㫫㫔㫮㫠㫛㫫㫟㫫㫛㫜㫭㫠㫚㫜㫛㫮㫠㫛㫫㫟㫔㫬 㫪㫤㫜㫫㫘㫔㫥㫘㫤㫜㫫㫔㫭㫠㫜㫮㫧㫦㫩㫫㫔㫔㫚㫦㫥㫫㫜㫥㫫㫫㫔㫮㫠㫛㫫㫟㫫㫛㫜㫭㫠㫚㫜㫛㫮㫠㫛㫫㫟㫩㫔㫠㫥㫠㫫㫠㫘㫣㫛㫪㫚㫘㫣㫜㫫㫟㫔㫬 㫪㫤㫜㫫㫘㫔㫥㫘㫤㫜㫫㫔㫭㫠㫜㫮㫧㫦㫩㫫㫔㫔㫚㫦㫥㫫㫜㫥㫫㫫㫔㫮㫠㫛㫫㫟㫫㫛㫜㫭㫠㫚㫜㫛㫮㫠㫛㫫㫟㫩㫔㫠㫥㫠㫫㫠㫘㫣㫛㫪㫚㫘㫣㫜㫫㫟㫩㫔㫤㫠㫥㫠㫤㫬㫤㫛㫪㫚㫘㫣 㫜㫫㫟㫜㫞㫔㫬
LOOK AGAIN @VIEWPORT PROPERTIES Those can work with tag, width, height initial-scale minimum-scale, maximum-scale user-scalable target-densityDpi 㫫㫘㫩㫞㫜㫫㫛㫛㫜㫥㫪㫠㫫㫰㫗㫧㫠㫔㫡㫬㫪㫫㫔㫮㫦㫩㫢㫔㫠㫥㫔㫪㫦㫤㫜㫔㫘㫥㫛㫩㫦㫠㫛㫔㫛㫜㫭㫠㫚㫜㫪㫜
@VIEWPORT, @MEDIA AND JS For example, use the iPhone4, @viewport use 480px @media ( max-width: 480px ) will work "device-width" in the @media told me "320px" 㫛㫦㫚㫬㫤㫜㫥㫫㫜㫛㫦㫚㫬㫤㫜㫥㫫㫘㫣㫜㫤㫜㫥㫫㫜㫦㫝㫝㫪㫜㫫㫘㫠㫛㫫㫟 told me "480px" 㫪㫚㫩㫜㫜㫥㫜㫮㫠㫛㫫㫟 told me "320px"
SO, JUST COPY AND PASTE html5-boilerplate or this one, or this one, 㫪㫤㫜㫫㫘㫔㫥㫘㫤㫜㫫㫔㫭㫠㫜㫮㫧㫦㫩㫫㫔㫔㫚㫦㫥㫫㫜㫥㫫㫫㫔㫮㫠㫛㫫㫟㫫㫛㫜㫭㫠㫚㫜㫛㫮㫠㫛㫫㫟㫔㫬 㫪㫤㫜㫫㫘㫔㫥㫘㫤㫜㫫㫔㫭㫠㫜㫮㫧㫦㫩㫫㫔㫔㫚㫦㫥㫫㫜㫥㫫㫫㫔㫮㫠㫛㫫㫟㫫㫛㫜㫭㫠㫚㫜㫛㫮㫠㫛㫫㫟㫩㫔㫠㫥㫠㫫㫠㫘㫣㫛㫪㫚㫘㫣㫜㫫㫟㫔㫬 㫪㫤㫜㫫㫘㫔㫥㫘㫤㫜㫫㫔㫭㫠㫜㫮㫧㫦㫩㫫㫔㫔㫚㫦㫥㫫㫜㫥㫫㫫㫔㫮㫠㫛㫫㫟㫫㫛㫜㫭㫠㫚㫜㫛㫮㫠㫛㫫㫟㫩㫔㫠㫥㫠㫫㫠㫘㫣㫛㫪㫚㫘㫣㫜㫫㫟㫩㫔㫤㫠㫥㫠㫤㫬㫤㫛㫪㫚㫘㫣 㫜㫫㫟㫜㫞㫔㫬
RWD AND @MEDIA Maybe you think, The way we use, 㫔㫔㫔㫔㫤㫦㫙㫠㫣㫜㫔㫮㫜㫙㫔㫧㫘㫞㫜 㫔㫔㫔㫔㫙㫔㫮㫤㫜㫛㫠㫘㫔㫨㫬㫜㫩㫰 㫔㫔㫔㫔㫫㫔㫛㫜㫪㫢㫫㫦㫧㫔㫮㫜㫙㫔㫧㫘㫞㫜 㫔㫔㫔㫔㫛㫜㫪㫢㫫㫦㫧㫔㫮㫜㫙㫔㫧㫘㫞㫜 㫔㫔㫔㫔㫙㫔㫮㫤㫜㫛㫠㫘㫔㫨㫬㫜㫩㫰 㫔㫔㫔㫔㫫㫔㫤㫦㫙㫠㫣㫜㫔㫮㫜㫙㫔㫧㫘㫞㫜
RWD AND @MEDIA Which dimension as starting point ? Where and how to make breaking points ? How to test against media features ? Non-supporting browsers.
“ The choice is not between using media queries and creating a dedicated mobile site; the choice is between using media queries and doing nothing at all. That said, in many situations the content you want to serve up will be the same regardless of context. --Jeremy Keith ” A responsive mind
SUMMARY, FINALLY @media based on @viewport size. RWD depends on media query or Javascript. DO NOT USE strange setting with @viewport, if you don'y know why you do. Use the @media carefully, do the @media style once, not overwriting at all. Think about your content again. DO NOT fight with your visual designer.
REFERENCES & RESOURCES CSS3 Media Queries Meta Layout: a closer look at media queries MEDIA QUERIES PRESENTATION AT INDIECONF ESSENTIAL CONSIDERATIONS FOR CRAFTING QUALITY MEDIA QUERIES Rethinking the Mobile Web Responsive Web Design A dao of Web Design More about device-pixel-ratio A tale of two viewports - part two CSS Device Adaptation CSS3 Media Queries Resolution Units Viewport percentage lengthes List of displays by pixel density
hinablue
nikkei_engineer_recruiting
you
niftycorp
minorun365
kosui
smt7174
chumajin
ufried
nayuts
hhiroshell
nishiuma
keathley
lara
cassininazir
mraible
samanthasiow
chrislema
chriscoyier
sugarenia
jcasabona
zenorocha
schacon