MEDIA QUERY 123@ 閃光洽
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
OK, LET'S GO.
http://www.flickr.com/photos/npobre/2601582256/
MEDIA QUERY@MEDIA
WHAT IS MEDIA QUERY ?CSS3 bring awesome new part!
Vary simple way to feed different CSS based oncharacteristic users' device.
Make us to re-think about "device".
Maybe easy to retrofix existing design.
WHAT THE MEDIA QUERY FOR ?Your device.
And your devices.
WHAT THE MEDIA QUERY NOT FOR ?Your feeling.
NOT based on browser.Yes, it just based on @viewport size.
@VIEWPORT ?ok, we talk about later.
ABOUT @MEDIAThere are 3 way to go,
1. @media with <link> tag
2. @media with CSS
3. @media with @import
㫕�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫔�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫔�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫔�㫕�
㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫔�㫕�㫕�㫕�㫔�㫘�
㫕�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫕�
@MEDIA WITH DEVICESTL;DR
We just talk about,
screen
all
not all
CSS3 Media Queries
@MEDIA EXPRESSIONSscreen 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 PROPERTIES1. width, height, device-width, device-height
2. orientation, aspect-ratio, device-aspect-ratio
3. color, color-index, monochrome
4. resolution, scan (only for tv media), grid
5. max-, min- prefix㫘�㫘�㫘�㫕�㫕�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫕�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�
@MEDIA PROPERTIES UNITwidth, 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 validvalue
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"
㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫔�㫕�
㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫕�㫘�㫘�㫔�㫕�
㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�
WE KNOWN THE MEDIA QUERY !YAY!
http://www.flickr.com/photos/t0msk/4109452525/
OK, TRY TO EXPLAIN THIS,㫔�㫔�㫔�㫔�㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫕�㫘�㫘�㫔�㫘�㫔�㫔�㫔�㫔�㫔�㫔�㫔�㫔�㫕�㫕�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫔�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫔�㫔�㫔�㫔�㫘�
㫔�㫔�㫔�㫔�㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫔�㫕�㫔�㫘�㫔�㫔�㫔�㫔�㫔�㫔�㫔�㫔�㫕�㫕�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫔�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫔�㫔�㫔�㫔�㫘�
㫔�㫔�㫔�㫔�㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫕�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫔�㫔�㫔�㫔�㫔�㫔�㫔�㫔�㫕�㫕�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫔�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫔�㫔�㫔�㫔�㫘�
㫔�㫔�㫔�㫔�㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫔�㫔�㫔�㫔�㫔�㫔�㫔�㫔�㫕�㫕�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫔�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫔�㫔�㫔�㫔�㫔�㫔�㫔�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫕�㫔�㫘�㫔�㫔�㫔�㫔�㫘�
ALL NOT WORK, WHY?
http://www.flickr.com/photos/mpilote/3304961453/
IDENTIFY THE WRONG,㫔�㫔�㫔�㫔�㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫕�㫘�㫘�㫔�㫕�㫔�㫘�㫔�㫔�㫔�㫔�㫔�㫔�㫔�㫔�㫕�㫕�㫔�㫖�㫘�㫘�㫕�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫔�㫔�㫔�㫔�㫘�
㫔�㫔�㫔�㫔�㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫕�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫔�㫕�㫔�㫘�㫔�㫔�㫔�㫔�㫔�㫔�㫔�㫔�㫕�㫕�㫔�㫗�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫔�㫘�㫘�㫘�㫔�㫔�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫔�㫔�㫔�㫔�㫘�
㫔�㫔�㫔�㫔�㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫕�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫔�㫔�㫔�㫔�㫔�㫔�㫔�㫔�㫕�㫕�㫔�㫗�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫔�㫖�㫗�㫗�㫕�㫔�㫕�㫕�㫔�㫔�㫔�㫔�㫘�
㫔�㫔�㫔�㫔�㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫔�㫔�㫔�㫔�㫔�㫔�㫔�㫔�㫕�㫕�㫔�㫗�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫔�㫕�㫕�㫔�㫔�㫔�㫔�㫔�㫔�㫔�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫕�㫔�㫘�㫔�㫔�㫔�㫔�㫘�
@MEDIA AND DISPLAYDIVERSITY OF DISPLAY
ABOUT "DISPLAY"Desktop, laptop display
Smartphone display
Retina display
All other displays
5.6 billion users at theearly 2013.
491.4 million mobilephones at 2011.
THE CHALLENGE FROM MOBILE DEVICES
photocount.com
HOW MANY DISPLAY RESOLUTION WEMUST CONSIDER ?List of displays by pixel density
NOTINFINITE
BUTCLOSE
RIGHT ?Think about the Android devices.
DENSITYDESTINY
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 is640x960 that specification say so. So, can we use @media( max-width: 640px ) to do our job?
NO. You should use @media ( max-width: 320px ) causethe device-pixel-ratio is 2.
DENSITY CONVERSION
Designing (and converting) for multiple mobile densities
“
As an example, if your page had an image that was 100pxby 100px, you'd provide an image that was 200px by200px, but specify in CSS or as an attribute in HTML thatit is 100px by 100px.
The reason this works is that a pixel on the screen is notthe same as a CSS pixel. This is a good thing, becauseotherwise as I say, things would be tiny.
--Rich Bradshaw
”Pixel density, retina display and font-size in CSS
DEVICE-PIXEL-RATIOTL; DR
More about device-pixel-ratio
List of displays by pixel density
I DON'T WANT TO DO MATH !Use "dppx", "vw", "vh"
Resolution Units
㫕�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫔�㫕�㫕�㫘�㫘�㫘�㫕�
Viewport percentage lengthes
㫕�㫘�㫘�㫔�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫔�㫕�㫕�㫘�㫘�㫕�㫔�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫔�㫕�㫕�㫕�㫘�㫘�㫕�
BACK TO MEDIA QUERY@MEDIA IN THE REAL WORLD
DESIGN FOR DIFFERENT DEVICESdifferent devices = different widths
start with browser if possible
wide or narrow
retrofit existing design
content first
START WITH DESKTOP STYLESGood parts
Easy to start or retrofit existing design
IE 6-8 may work correctly without extra work
OtherwiseRequests Javascript or style to support mobiledesign in IE Mobile or other mobile browsers
START WITH MOBILE STYLESGood parts
Non-support media query browsers still get themobile style
Mobile device will not downloading unneededdesktop style
OtherwiseRequests Javascript or style to support IE 6-8 tomake it work correctly
WHAT IS YOUR CHOOSE ?
http://www.flickr.com/photos/marfis75/8031936764/
320x480
WE START WITH MOBILE STYLESNarrow width
1280x900
WE START WITH MOBILE STYLESWide width
320x480
WE START WITH MOBILE STYLESNarrow width
1280x900
WE START WITH MOBILE STYLESWide width
WHAT'S QUERY WE HAVE ?
total 105 lines in SASS
㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫔�㫕�
㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫔�㫕�
㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫔�㫕�
㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫔�㫕�
㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫔�㫕�
㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫔�㫕�
㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫕�㫘�㫘�㫔�㫕�
WHY OUR QUERIES SO ODDLY ?WHY SO MANY MEDIA QUERY WE USED ?
THE BOOTSTRAP WAY
Responsive Media Query Quick Reference
LOOK AGAIN OUR QUERIES,Bootstrap use,
We have,
㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫔�㫕�
㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫔�㫕�
㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫔�㫕�
㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫔�㫕�
㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫔�㫕�
㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫔�㫕�
㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫕�㫘�㫘�㫔�㫕�
THE QUERY REALLY DO IS...Make special size of your elements to fit the layout.
㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫘�㫗�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫖�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫘�㫗�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫗�㫘�㫘�㫘�㫘�㫕�
㫘�㫘�㫔�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫕�㫔�㫕�㫕�㫕�㫔�㫕�㫔�㫘�㫔�㫔�㫔�㫔�㫕�㫕�㫔�㫖�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫔�㫔�㫔�㫔�㫕�㫕�㫔�㫖�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫗�㫖�㫕�㫔�㫘�㫘�㫘�㫔�㫗�㫖�㫖�㫗�㫔�㫕�㫗�㫗�㫗�㫖�㫕�㫔�㫕�㫕�㫘�
SPECIAL WE USED㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫕�㫔�㫘�㫔�㫔�㫔�㫔�㫕�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫘�
SPECIAL WE USED㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫕�㫘�㫘�㫕�㫔�㫘�㫔�㫔�㫔�㫔�㫕�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫘�
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.
SIMPLEis fucking
HARD
OH!!!ABOUT @VIEWPORT
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 haveand IT IS READ-ONLY. In the other word, it called"visual viewport".
actual viewport
After initial viewport, this is the rules you setting inthe viewport, in the other word, it called "layoutviewport".
WHY WE LEARN ABOUT @VIEWPORT ?TL; DR
A tale of two viewports — part two
w3c, css device adaptation
I DO NOT WANT TO LEARN.
http://www.flickr.com/photos/jdblundell/3324932274/
OK, JUST COPY AND PASTEhtml5-boilerplate
or this one,
or this one,
㫕�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫕�
㫕�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫕�㫔�㫕�
㫕�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫕�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫕�㫕�㫕�㫔�㫕�
AND DO NOT ASK ME WHY !GOOGLE IT, PLEASE.
http://www.flickr.com/photos/lassi_kurkijarvi/3456993824/
LITTLE QUIZWOULD YOU REALLY KNOW ABOUT @MEDIA ?
http://www.flickr.com/photos/albertogp123/5843577306/
Q1: WHICH @MEDIA WILL WORK ?㫕�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫔�㫔�㫔�㫔�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫕�㫘�
㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫕�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫕�㫔�㫘�㫔�㫔�㫔�㫔�㫕�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫕�㫘�
㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫕�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫕�㫔�㫘�㫔�㫔�㫔�㫔�㫕�㫕�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫕�㫘�
㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫕�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫕�㫘�㫘�㫕�㫔�㫘�㫔�㫔�㫔�㫔�㫕�㫕�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫕�㫘�
Q2: WHICH @MEDIA WILL WORK ?㫕�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫔�㫔�㫔�㫔�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫕�㫘�
㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫕�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫕�㫔�㫘�㫔�㫔�㫔�㫔�㫕�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫕�㫘�
㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫕�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫕�㫔�㫘�㫔�㫔�㫔�㫔�㫕�㫕�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫕�㫘�
㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫕�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫕�㫘�㫘�㫕�㫔�㫘�㫔�㫔�㫔�㫔�㫕�㫕�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫔�㫕�㫕�㫘�
ANSWERQ1:
narrow style will work, wide style will overwrite if thesame properties occur.
Q2:
all does not work.
YOUR ANSWER IS ALL WRONG ?
http://www.flickr.com/photos/proimos/4199675334/
LOOK AGAIN @VIEWPORT PROPERTIESThose can work with <meta> tag,
width, height
initial-scale
minimum-scale, maximum-scale
user-scalable
target-densityDpi㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫖�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫕�
@VIEWPORT IN CSSCSS Device Adaptation
㫕�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫔�㫔�㫔�㫔�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫔�㫔�㫔�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫔�㫔�㫔�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫔�㫔�㫔�㫔�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫔�㫔�㫔�㫔�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫔�㫔�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫔�㫔�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫕�㫕�㫕�㫘�㫘�㫘�㫕�㫘�
@VIEWPORT, @MEDIA AND JSFor 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"
WTF !
http://www.flickr.com/photos/jannemei/1023015396/
@VIEWPORT IN REAL WORLDvisual and layout viewport
A tale of two viewports — part two
@VIEWPORT IN REAL WORLDvisual viewport = layout viewport
A tale of two viewports — part two
SO, JUST COPY AND PASTEhtml5-boilerplate
or this one,
or this one,
㫕�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫕�
㫕�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫕�㫔�㫕�
㫕�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫕�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫕�㫘�㫘�㫘�㫘�㫘�㫕�㫕�㫕�㫕�㫔�㫕�
RESPONSIVE WEB DESIGN@VIEWPORT + @MEDIA
RWD AND @MEDIAMaybe you think,
The way we use,
㫔�㫔�㫔�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫔�㫔�㫔�㫕�㫔�㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫔�㫔�㫔�㫔�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�
㫔�㫔�㫔�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫔�㫔�㫔�㫔�㫕�㫔�㫕�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�㫘�㫔�㫔�㫔�㫔�㫕�㫔�㫘�㫘�㫘�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫔�㫘�㫘�㫘�㫘�
RWD AND @MEDIAWhich 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 andcreating a dedicated mobile site; the choice is betweenusing media queries and doing nothing at all.
That said, in many situations the content you want toserve up will be the same regardless of context.
--Jeremy Keith
”A responsive mind
RE-THINK ABOUT THE WEB DESIGNA Dao of Web Design
http://www.flickr.com/photos/tahini/5810915356/
SUMMARY, FINALLY@media based on @viewport size.
RWD depends on media query or Javascript.
DO NOT USE strange setting with @viewport, if youdon'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.
QUESTION :) ?
REFERENCES & RESOURCESCSS3 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