$30 off During Our Annual Pro Sale. View Details »

WebConf2013 - Media Query 123

Cain Chen
January 11, 2013

WebConf2013 - Media Query 123

Cain Chen

January 11, 2013
Tweet

More Decks by Cain Chen

Other Decks in Technology

Transcript

  1. MEDIA QUERY 123
    @ 閃光洽

    View Slide

  2. ABOUT ME
    Hina Chen, a.k.a. 閃光洽
    農夫
    鐵工
    居家修繕
    http://blog.hinablue.me

    View Slide

  3. 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

    View Slide

  4. OK, LET'S GO.
    http://www.flickr.com/photos/npobre/2601582256/

    View Slide

  5. MEDIA QUERY
    @MEDIA

    View Slide

  6. 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.

    View Slide

  7. WHAT THE MEDIA QUERY FOR ?
    Your device.
    And your devices.

    View Slide

  8. WHAT THE MEDIA QUERY NOT FOR ?
    Your feeling.
    NOT based on browser.
    Yes, it just based on @viewport size.

    View Slide

  9. @VIEWPORT ?
    ok, we talk about later.

    View Slide

  10. ABOUT @MEDIA
    There are 3 way to go,
    1. @media with tag
    2. @media with CSS
    3. @media with @import
    㫪㫣㫠㫥㫢㫔㫩㫜㫣㫫㫔㫪㫫㫰㫣㫜㫪㫟㫜㫜㫫㫔㫔㫤㫜㫛㫠㫘㫫㫔㫪㫚㫩㫜㫜㫥㫔㫔㫟㫩㫜㫝㫫㫔㫜㫜㫜㫔㫬
    㫮㫤㫜㫛㫠㫘㫔㫪㫚㫩㫜㫜㫥㫔㫲㫔㫜㫜㫜㫔㫴
    㫮㫠㫤㫧㫦㫩㫫㫔㫬㫩㫣㫖㫪㫚㫩㫜㫜㫥㫜㫚㫪㫪㫗㫔㫪㫚㫩㫜㫜㫥㫩

    View Slide

  11. @MEDIA WITH DEVICES
    TL;DR
    We just talk about,
    screen
    all
    not all
    CSS3 Media Queries

    View Slide

  12. @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"

    View Slide

  13. @MEDIA PROPERTIES
    1. 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
    㫤㫘㫯㫛㫨㫔㫣㫜㫪㫪㫔㫫㫟㫘㫥㫔㫘㫥㫛㫔㫜㫨㫬㫘㫣㫔㫫㫦
    㫤㫠㫥㫛㫨㫔㫞㫩㫜㫘㫫㫜㫩㫔㫫㫟㫘㫥㫔㫘㫥㫛㫔㫜㫨㫬㫘㫣㫔㫫㫦

    View Slide

  14. @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

    View Slide

  15. WHEN @MEDIA ACTUALLY WORK ?
    Correct device with @media
    Expressions or properties matched
    "not all"
    㫮㫤㫜㫛㫠㫘㫔㫦㫥㫣㫰㫔㫪㫚㫩㫜㫜㫥㫔㫘㫥㫛㫔㫖㫔㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫢㫦㫞㫧㫯㫔㫗
    㫮㫤㫜㫛㫠㫘㫔㫖㫔㫤㫠㫥㫛㫮㫠㫛㫫㫟㫨㫔㫥㫤㫦㫧㫯㫔㫗㫔㫘㫥㫛㫔㫖㫔㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫟㫞㫠㫢㫧㫯㫔㫗
    㫮㫤㫜㫛㫠㫘㫔㫫㫜㫪㫫

    View Slide

  16. WE KNOWN THE MEDIA QUERY !
    YAY!
    http://www.flickr.com/photos/t0msk/4109452525/

    View Slide

  17. OK, TRY TO EXPLAIN THIS,
    㫔㫔㫔㫔㫮㫤㫜㫛㫠㫘㫔㫦㫥㫣㫰㫔㫪㫚㫩㫜㫜㫥㫔㫘㫥㫛㫔㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫟㫠㫞㫞㫧㫯㫔㫲
    㫔㫔㫔㫔㫔㫔㫔㫔㫝㫘㫔㫮㫦㫩㫢㫔㫦㫩㫔㫥㫦㫫㫭㫔㫘㫝
    㫔㫔㫔㫔㫴
    㫔㫔㫔㫔㫮㫤㫜㫛㫠㫘㫔㫦㫥㫣㫰㫔㫪㫚㫩㫜㫜㫥㫔㫘㫥㫛㫖㫤㫠㫥㫛㫮㫠㫛㫫㫟㫨㫔㫢㫦㫞㫧㫯㫗㫔㫘㫥㫛㫔㫖㫔㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫥㫤㫦㫧㫯㫔㫗㫔㫲
    㫔㫔㫔㫔㫔㫔㫔㫔㫝㫘㫔㫮㫦㫩㫢㫔㫦㫩㫔㫥㫦㫫㫭㫔㫘㫝
    㫔㫔㫔㫔㫴
    㫔㫔㫔㫔㫮㫤㫜㫛㫠㫘㫔㫫㫜㫪㫫㫩㫚㫔㫪㫚㫩㫜㫜㫥㫔㫲
    㫔㫔㫔㫔㫔㫔㫔㫔㫝㫘㫔㫮㫦㫩㫢㫔㫦㫩㫔㫥㫦㫫㫭㫔㫘㫝
    㫔㫔㫔㫔㫴
    㫔㫔㫔㫔㫮㫤㫜㫛㫠㫘㫔㫮㫤㫜㫛㫠㫘㫔㫪㫚㫩㫜㫜㫥㫔㫘㫥㫛㫔㫖㫔㫤㫦㫥㫦㫚㫟㫩㫦㫤㫜㫔㫗㫔㫲
    㫔㫔㫔㫔㫔㫔㫔㫔㫝㫘㫔㫮㫦㫩㫢㫔㫦㫩㫔㫥㫦㫫㫭㫔㫘㫝
    㫔㫔㫔㫔㫔㫔㫔㫔㫙㫦㫛㫰㫔㫲㫔㫚㫦㫣㫦㫩㫨㫔㫩㫜㫛㫩㫔㫴
    㫔㫔㫔㫔㫴

    View Slide

  18. ALL NOT WORK, WHY?
    http://www.flickr.com/photos/mpilote/3304961453/

    View Slide

  19. IDENTIFY THE WRONG,
    㫔㫔㫔㫔㫮㫤㫜㫛㫠㫘㫔㫦㫥㫣㫰㫔㫪㫚㫩㫜㫜㫥㫔㫘㫥㫛㫔㫖㫔㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫟㫠㫞㫞㫧㫯㫔㫗㫔㫲
    㫔㫔㫔㫔㫔㫔㫔㫔㫝㫘㫔㫗㫦㫥㫕㫫㫔㫝㫦㫩㫞㫜㫫㫔㫫㫟㫜㫔㫙㫩㫘㫚㫢㫜㫫㫪㫔㫮㫠㫫㫟㫔㫤㫜㫛㫠㫘㫔㫝㫜㫘㫫㫬㫩㫜㫪㫜㫔㫘㫝
    㫔㫔㫔㫔㫴
    㫔㫔㫔㫔㫮㫤㫜㫛㫠㫘㫔㫦㫥㫣㫰㫔㫪㫚㫩㫜㫜㫥㫔㫘㫥㫛㫔㫖㫤㫠㫥㫛㫮㫠㫛㫫㫟㫨㫔㫢㫦㫞㫧㫯㫗㫔㫘㫥㫛㫔㫖㫔㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫥㫤㫦㫧㫯㫔㫗㫔㫲
    㫔㫔㫔㫔㫔㫔㫔㫔㫝㫘㫔㫗㫦㫔㫪㫧㫘㫚㫜㫔㫙㫜㫫㫮㫜㫜㫥㫔㫔㫘㫥㫛㫔㫔㫘㫥㫛㫔㫫㫟㫜㫔㫜㫯㫧㫩㫜㫪㫪㫠㫦㫥㫔㫠㫪㫔㫥㫦㫫㫔㫘㫣㫣㫦㫮㫜㫛㫜㫔㫘㫝
    㫔㫔㫔㫔㫴
    㫔㫔㫔㫔㫮㫤㫜㫛㫠㫘㫔㫫㫜㫪㫫㫩㫚㫔㫪㫚㫩㫜㫜㫥㫔㫲
    㫔㫔㫔㫔㫔㫔㫔㫔㫝㫘㫔㫗㫜㫤㫠㫚㫦㫣㫦㫥㫔㫫㫜㫩㫤㫠㫥㫘㫫㫜㫪㫔㫠㫥㫔㫫㫟㫜㫔㫮㫤㫜㫛㫠㫘㫔㫩㫬㫣㫜㫔㫠㫥㫔㫖㫗㫗㫜㫔㫘㫝
    㫔㫔㫔㫔㫴
    㫔㫔㫔㫔㫮㫤㫜㫛㫠㫘㫔㫪㫚㫩㫜㫜㫥㫔㫘㫥㫛㫔㫖㫔㫤㫦㫥㫦㫚㫟㫩㫦㫤㫜㫔㫗㫔㫲
    㫔㫔㫔㫔㫔㫔㫔㫔㫝㫘㫔㫘㫟㫠㫚㫟㫔㫤㫦㫥㫦㫚㫟㫩㫦㫤㫜㫔㫪㫚㫩㫜㫜㫥㫔㫚㫘㫥㫔㫛㫠㫪㫧㫣㫘㫰㫔㫩㫜㫛㫔㫚㫦㫣㫦㫩㫔㫭㫔㫘㫝
    㫔㫔㫔㫔㫔㫔㫔㫔㫙㫦㫛㫰㫔㫲㫔㫚㫦㫣㫦㫩㫨㫔㫩㫜㫛㫩㫔㫴
    㫔㫔㫔㫔㫴

    View Slide

  20. @MEDIA AND DISPLAY
    DIVERSITY OF DISPLAY

    View Slide

  21. ABOUT "DISPLAY"
    Desktop, laptop display
    Smartphone display
    Retina display
    All other displays

    View Slide

  22. 5.6 billion users at the
    early 2013.
    491.4 million mobile
    phones at 2011.
    THE CHALLENGE FROM MOBILE DEVICES
    photocount.com

    View Slide

  23. HOW MANY DISPLAY RESOLUTION WE
    MUST CONSIDER ?
    List of displays by pixel density

    View Slide

  24. NOT
    INFINITE
    BUT
    CLOSE
    RIGHT ?
    Think about the Android devices.

    View Slide

  25. DENSITY
    DESTINY

    View Slide

  26. WHY WE TALK ABOUT DENSITY ?
    @media work based on @viewport rule.
    Mobile devices has lots of resolution.
    㫮㫭㫠㫜㫮㫧㫦㫩㫫㫔㫲
    㫔㫔㫔㫔㫮㫠㫛㫫㫟㫨㫔㫢㫞㫞㫧㫯㫩

    㫮㫤㫜㫛㫠㫘㫔㫦㫥㫣㫰㫔㫪㫚㫩㫜㫜㫥㫔㫘㫥㫛㫔㫖㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫢㫦㫞㫧㫯㫗㫔㫲㫔㫜㫜㫜㫔㫴
    㫮㫤㫜㫛㫠㫘㫔㫖㫔㫛㫮㫜㫙㫢㫠㫫㫛㫤㫠㫥㫛㫛㫜㫭㫠㫚㫜㫛㫧㫠㫯㫜㫣㫛㫩㫘㫫㫠㫦㫨㫔㫠㫔㫗㫔㫲
    㫔㫔㫔㫔㫝㫘㫔㫠㫗㫟㫦㫥㫜㫢㫔㫘㫝

    View Slide

  27. 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.

    View Slide

  28. DENSITY CONVERSION
    Designing (and converting) for multiple mobile densities

    View Slide


  29. 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

    View Slide

  30. DEVICE-PIXEL-RATIO
    TL; DR
    More about device-pixel-ratio
    List of displays by pixel density

    View Slide

  31. I DON'T WANT TO DO MATH !
    Use "dppx", "vw", "vh"
    Resolution Units
    㫟㫛㫧㫧㫯㫔㫠㫪㫔㫜㫨㫬㫠㫭㫘㫣㫜㫥㫫㫔㫫㫦㫔㫧㫤㫛㫧㫠㫜
    Viewport percentage lengthes
    㫟㫭㫮㫔㫠㫪㫔㫜㫨㫬㫠㫭㫘㫣㫜㫥㫫㫔㫫㫦㫔㫡㫠㫧㫯㫚㫔㫠㫝㫔㫮㫠㫛㫫㫟㫔㫦㫝㫔㫫㫟㫜㫔㫭㫠㫜㫮㫧㫦㫩㫫㫔㫠㫪㫔㫡㫠㫞㫧㫯㫜

    View Slide

  32. BACK TO MEDIA QUERY
    @MEDIA IN THE REAL WORLD

    View Slide

  33. DESIGN FOR DIFFERENT DEVICES
    different devices = different widths
    start with browser if possible
    wide or narrow
    retrofit existing design
    content first

    View Slide

  34. 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

    View Slide

  35. 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

    View Slide

  36. WHAT IS YOUR CHOOSE ?
    http://www.flickr.com/photos/marfis75/8031936764/

    View Slide

  37. 320x480
    WE START WITH MOBILE STYLES
    Narrow width

    View Slide

  38. 1280x900
    WE START WITH MOBILE STYLES
    Wide width

    View Slide

  39. 320x480
    WE START WITH MOBILE STYLES
    Narrow width

    View Slide

  40. 1280x900
    WE START WITH MOBILE STYLES
    Wide width

    View Slide

  41. WHAT'S QUERY WE HAVE ?
    total 105 lines in SASS
    㫮㫤㫜㫛㫠㫘㫔㫖㫔㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫣㫣㫡㫧㫯㫔㫗
    㫮㫤㫜㫛㫠㫘㫔㫖㫔㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫢㫦㫞㫧㫯㫔㫗
    㫮㫤㫜㫛㫠㫘㫔㫖㫔㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫢㫢㫞㫧㫯㫔㫗
    㫮㫤㫜㫛㫠㫘㫔㫖㫔㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫡㫠㫞㫧㫯㫔㫗
    㫮㫤㫜㫛㫠㫘㫔㫖㫔㫤㫠㫥㫛㫮㫠㫛㫫㫟㫨㫔㫥㫤㫦㫧㫯㫔㫗㫔㫘㫥㫛㫔㫖㫔㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫧㫥㫧㫧㫯㫔㫗
    㫮㫤㫜㫛㫠㫘㫔㫖㫔㫤㫠㫥㫛㫮㫠㫛㫫㫟㫨㫔㫧㫦㫞㫧㫯㫔㫗
    㫮㫤㫜㫛㫠㫘㫔㫖㫔㫤㫠㫥㫛㫮㫠㫛㫫㫟㫨㫔㫟㫞㫦㫞㫧㫯㫔㫗

    View Slide

  42. WHY OUR QUERIES SO ODDLY ?
    WHY SO MANY MEDIA QUERY WE USED ?

    View Slide

  43. THE BOOTSTRAP WAY
    Responsive Media Query Quick Reference

    View Slide

  44. LOOK AGAIN OUR QUERIES,
    Bootstrap use,
    We have,
    㫮㫤㫜㫛㫠㫘㫔㫖㫔㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫢㫦㫞㫧㫯㫔㫗
    㫮㫤㫜㫛㫠㫘㫔㫖㫔㫤㫠㫥㫛㫮㫠㫛㫫㫟㫨㫔㫥㫤㫦㫧㫯㫔㫗㫔㫘㫥㫛㫔㫖㫔㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫧㫥㫧㫧㫯㫔㫗
    㫮㫤㫜㫛㫠㫘㫔㫖㫔㫤㫠㫥㫛㫮㫠㫛㫫㫟㫨㫔㫧㫦㫞㫧㫯㫔㫗
    㫮㫤㫜㫛㫠㫘㫔㫖㫔㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫣㫣㫡㫧㫯㫔㫗
    㫮㫤㫜㫛㫠㫘㫔㫖㫔㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫢㫢㫞㫧㫯㫔㫗
    㫮㫤㫜㫛㫠㫘㫔㫖㫔㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫡㫠㫞㫧㫯㫔㫗
    㫮㫤㫜㫛㫠㫘㫔㫖㫔㫤㫠㫥㫛㫮㫠㫛㫫㫟㫨㫔㫟㫞㫦㫞㫧㫯㫔㫗

    View Slide

  45. THE QUERY REALLY DO IS...
    Make special size of your elements to fit the layout.
    㫭㫘㫩㫔㫧㫩㫦㫤㫠㫪㫜㫔㫫㫔㫛㫦㫚㫬㫤㫜㫥㫫㫜㫙㫦㫛㫰㫜㫦㫝㫝㫪㫜㫫㫘㫠㫛㫫㫟㫔㫳㫳㫔㫛㫦㫚㫬㫤㫜㫥㫫㫜㫛㫦㫚㫬㫤㫜㫥㫫㫘㫣㫜㫤㫜㫥㫫㫜㫦㫝㫝㫪㫜㫫㫘㫠㫛㫫㫟㫔
    㫳㫳㫔㫮㫠㫥㫛㫦㫮㫜㫠㫥㫥㫜㫩㫘㫠㫛㫫㫟㫩
    㫠㫝㫔㫖㫔㫧㫩㫦㫤㫠㫪㫜㫔㫫㫫㫔㫤㫡㫡㫔㫗㫔㫲
    㫔㫔㫔㫔㫝㫘㫔㫗㫦㫔㫰㫦㫬㫩㫔㫪㫧㫜㫚㫠㫘㫣㫔㫨㫬㫜㫩㫰㫔㫟㫜㫩㫜㫜㫔㫘㫝
    㫴㫔㫜㫣㫪㫜㫔㫲
    㫔㫔㫔㫔㫝㫘㫔㫙㫠㫞㫟㫫㫔㫮㫠㫫㫟㫔㫰㫦㫬㫩㫔㫗㫗㫚㫔㫘㫥㫛㫔㫗㫘㫘㫗㫔㫯㫘㫗㫗㫘㫜㫔㫘㫝

    View Slide

  46. SPECIAL WE USED
    㫮㫤㫜㫛㫠㫘㫔㫖㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫣㫣㫡㫧㫯㫗㫔㫲
    㫔㫔㫔㫔㫝㫘㫔㫧㫩㫜㫭㫠㫜㫮㫔㫚㫘㫩㫛㫔㫤㫘㫯㫤㫠㫬㫤㫔㫪㫠㫱㫜㫚㫔㫝㫦㫩㫚㫜㫔㫫㫦㫔㫘㫣㫠㫞㫥㫔㫚㫜㫥㫫㫜㫩㫔㫦㫝㫔㫧㫘㫞㫜㫜㫔㫘㫝

    View Slide

  47. SPECIAL WE USED
    㫮㫤㫜㫛㫠㫘㫔㫖㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫟㫞㫦㫞㫧㫯㫗㫔㫲
    㫔㫔㫔㫔㫝㫘㫔㫧㫩㫜㫭㫠㫜㫮㫔㫚㫘㫩㫛㫔㫤㫘㫯㫤㫠㫬㫤㫔㫪㫠㫱㫜㫚㫔㫝㫦㫩㫚㫜㫔㫫㫦㫔㫘㫣㫠㫞㫥㫔㫚㫜㫥㫫㫜㫩㫔㫦㫝㫔㫧㫘㫞㫜㫜㫔㫘㫝

    View Slide

  48. 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.

    View Slide

  49. SIMPLE
    is fucking
    HARD

    View Slide

  50. OH!!!
    ABOUT @VIEWPORT

    View Slide

  51. 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.

    View Slide

  52. 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".

    View Slide

  53. WHY WE LEARN ABOUT @VIEWPORT ?
    TL; DR
    A tale of two viewports — part two
    w3c, css device adaptation

    View Slide

  54. I DO NOT WANT TO LEARN.
    http://www.flickr.com/photos/jdblundell/3324932274/

    View Slide

  55. OK, JUST COPY AND PASTE
    html5-boilerplate
    or this one,
    or this one,
    㫪㫤㫜㫫㫘㫔㫥㫘㫤㫜㫫㫔㫭㫠㫜㫮㫧㫦㫩㫫㫔㫔㫚㫦㫥㫫㫜㫥㫫㫫㫔㫮㫠㫛㫫㫟㫫㫛㫜㫭㫠㫚㫜㫛㫮㫠㫛㫫㫟㫔㫬
    㫪㫤㫜㫫㫘㫔㫥㫘㫤㫜㫫㫔㫭㫠㫜㫮㫧㫦㫩㫫㫔㫔㫚㫦㫥㫫㫜㫥㫫㫫㫔㫮㫠㫛㫫㫟㫫㫛㫜㫭㫠㫚㫜㫛㫮㫠㫛㫫㫟㫩㫔㫠㫥㫠㫫㫠㫘㫣㫛㫪㫚㫘㫣㫜㫫㫟㫔㫬
    㫪㫤㫜㫫㫘㫔㫥㫘㫤㫜㫫㫔㫭㫠㫜㫮㫧㫦㫩㫫㫔㫔㫚㫦㫥㫫㫜㫥㫫㫫㫔㫮㫠㫛㫫㫟㫫㫛㫜㫭㫠㫚㫜㫛㫮㫠㫛㫫㫟㫩㫔㫠㫥㫠㫫㫠㫘㫣㫛㫪㫚㫘㫣㫜㫫㫟㫩㫔㫤㫠㫥㫠㫤㫬㫤㫛㫪㫚㫘㫣
    㫜㫫㫟㫜㫞㫔㫬

    View Slide

  56. AND DO NOT ASK ME WHY !
    GOOGLE IT, PLEASE.
    http://www.flickr.com/photos/lassi_kurkijarvi/3456993824/

    View Slide

  57. LITTLE QUIZ
    WOULD YOU REALLY KNOW ABOUT @MEDIA ?
    http://www.flickr.com/photos/albertogp123/5843577306/

    View Slide

  58. Q1: WHICH @MEDIA WILL WORK ?
    㫮㫭㫠㫜㫮㫧㫦㫩㫫㫔㫲
    㫔㫔㫔㫔㫮㫠㫛㫫㫟㫨㫔㫢㫞㫞㫧㫯㫩

    㫮㫤㫜㫛㫠㫘㫔㫪㫚㫩㫜㫜㫥㫔㫘㫥㫛㫔㫖㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫢㫦㫞㫧㫯㫗㫔㫲
    㫔㫔㫔㫔㫝㫘㫔㫥㫘㫩㫩㫦㫮㫔㫪㫫㫰㫣㫜㫔㫘㫝

    㫮㫤㫜㫛㫠㫘㫔㫪㫚㫩㫜㫜㫥㫔㫘㫥㫛㫔㫖㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫥㫤㫦㫧㫯㫗㫔㫲
    㫔㫔㫔㫔㫝㫘㫔㫮㫠㫛㫜㫔㫪㫫㫰㫣㫜㫔㫘㫝

    㫮㫤㫜㫛㫠㫘㫔㫪㫚㫩㫜㫜㫥㫔㫘㫥㫛㫔㫖㫤㫠㫥㫛㫮㫠㫛㫫㫟㫨㫔㫟㫠㫞㫞㫧㫯㫗㫔㫲
    㫔㫔㫔㫔㫝㫘㫔㫭㫜㫩㫰㫔㫮㫠㫛㫜㫔㫪㫫㫰㫣㫜㫔㫘㫝

    View Slide

  59. Q2: WHICH @MEDIA WILL WORK ?
    㫮㫭㫠㫜㫮㫧㫦㫩㫫㫔㫲
    㫔㫔㫔㫔㫮㫠㫛㫫㫟㫨㫔㫧㫠㫞㫧㫯㫩

    㫮㫤㫜㫛㫠㫘㫔㫪㫚㫩㫜㫜㫥㫔㫘㫥㫛㫔㫖㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫢㫦㫞㫧㫯㫗㫔㫲
    㫔㫔㫔㫔㫝㫘㫔㫥㫘㫩㫩㫦㫮㫔㫪㫫㫰㫣㫜㫔㫘㫝

    㫮㫤㫜㫛㫠㫘㫔㫪㫚㫩㫜㫜㫥㫔㫘㫥㫛㫔㫖㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫥㫤㫦㫧㫯㫗㫔㫲
    㫔㫔㫔㫔㫝㫘㫔㫮㫠㫛㫫㫔㫪㫫㫰㫣㫜㫔㫘㫝

    㫮㫤㫜㫛㫠㫘㫔㫪㫚㫩㫜㫜㫥㫔㫘㫥㫛㫔㫖㫤㫠㫥㫛㫮㫠㫛㫫㫟㫨㫔㫟㫠㫞㫞㫧㫯㫗㫔㫲
    㫔㫔㫔㫔㫝㫘㫔㫭㫜㫩㫰㫔㫮㫠㫛㫜㫔㫪㫫㫰㫣㫜㫔㫘㫝

    View Slide

  60. ANSWER
    Q1:
    narrow style will work, wide style will overwrite if the
    same properties occur.
    Q2:
    all does not work.

    View Slide

  61. YOUR ANSWER IS ALL WRONG ?
    http://www.flickr.com/photos/proimos/4199675334/

    View Slide

  62. LOOK AGAIN @VIEWPORT PROPERTIES
    Those can work with tag,
    width, height
    initial-scale
    minimum-scale, maximum-scale
    user-scalable
    target-densityDpi
    㫫㫘㫩㫞㫜㫫㫛㫛㫜㫥㫪㫠㫫㫰㫗㫧㫠㫔㫡㫬㫪㫫㫔㫮㫦㫩㫢㫔㫠㫥㫔㫪㫦㫤㫜㫔㫘㫥㫛㫩㫦㫠㫛㫔㫛㫜㫭㫠㫚㫜㫪㫜

    View Slide

  63. @VIEWPORT IN CSS
    CSS Device Adaptation
    㫮㫭㫠㫜㫮㫧㫦㫩㫫㫔㫲
    㫔㫔㫔㫔㫮㫠㫛㫫㫟㫨㫔㫛㫜㫭㫠㫚㫜㫛㫮㫠㫛㫫㫟㫩
    㫔㫔㫔㫔㫱㫦㫦㫤㫨㫔㫟㫩
    㫔㫔㫔㫔㫤㫠㫥㫛㫱㫦㫦㫤㫨㫔㫟㫩
    㫔㫔㫔㫔㫤㫘㫯㫛㫱㫦㫦㫤㫨㫔㫟㫩
    㫔㫔㫔㫔㫬㫪㫜㫩㫛㫱㫦㫦㫤㫨㫔㫝㫠㫯㫜㫛㫩
    㫔㫔㫔㫔㫦㫩㫠㫫㫜㫥㫫㫘㫫㫠㫦㫥㫨㫔㫧㫦㫩㫫㫩㫘㫠㫫㫩
    㫔㫔㫔㫔㫩㫜㫪㫦㫣㫬㫫㫠㫦㫥㫨㫔㫟㫠㫞㫛㫧㫠㫩

    View Slide

  64. @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"

    View Slide

  65. WTF !
    http://www.flickr.com/photos/jannemei/1023015396/

    View Slide

  66. @VIEWPORT IN REAL WORLD
    visual and layout viewport
    A tale of two viewports — part two

    View Slide

  67. @VIEWPORT IN REAL WORLD
    visual viewport = layout viewport
    A tale of two viewports — part two

    View Slide

  68. SO, JUST COPY AND PASTE
    html5-boilerplate
    or this one,
    or this one,
    㫪㫤㫜㫫㫘㫔㫥㫘㫤㫜㫫㫔㫭㫠㫜㫮㫧㫦㫩㫫㫔㫔㫚㫦㫥㫫㫜㫥㫫㫫㫔㫮㫠㫛㫫㫟㫫㫛㫜㫭㫠㫚㫜㫛㫮㫠㫛㫫㫟㫔㫬
    㫪㫤㫜㫫㫘㫔㫥㫘㫤㫜㫫㫔㫭㫠㫜㫮㫧㫦㫩㫫㫔㫔㫚㫦㫥㫫㫜㫥㫫㫫㫔㫮㫠㫛㫫㫟㫫㫛㫜㫭㫠㫚㫜㫛㫮㫠㫛㫫㫟㫩㫔㫠㫥㫠㫫㫠㫘㫣㫛㫪㫚㫘㫣㫜㫫㫟㫔㫬
    㫪㫤㫜㫫㫘㫔㫥㫘㫤㫜㫫㫔㫭㫠㫜㫮㫧㫦㫩㫫㫔㫔㫚㫦㫥㫫㫜㫥㫫㫫㫔㫮㫠㫛㫫㫟㫫㫛㫜㫭㫠㫚㫜㫛㫮㫠㫛㫫㫟㫩㫔㫠㫥㫠㫫㫠㫘㫣㫛㫪㫚㫘㫣㫜㫫㫟㫩㫔㫤㫠㫥㫠㫤㫬㫤㫛㫪㫚㫘㫣
    㫜㫫㫟㫜㫞㫔㫬

    View Slide

  69. RESPONSIVE WEB DESIGN
    @VIEWPORT + @MEDIA

    View Slide

  70. RWD AND @MEDIA
    Maybe you think,
    The way we use,
    㫔㫔㫔㫔㫤㫦㫙㫠㫣㫜㫔㫮㫜㫙㫔㫧㫘㫞㫜
    㫔㫔㫔㫔㫙㫔㫮㫤㫜㫛㫠㫘㫔㫨㫬㫜㫩㫰
    㫔㫔㫔㫔㫫㫔㫛㫜㫪㫢㫫㫦㫧㫔㫮㫜㫙㫔㫧㫘㫞㫜
    㫔㫔㫔㫔㫛㫜㫪㫢㫫㫦㫧㫔㫮㫜㫙㫔㫧㫘㫞㫜
    㫔㫔㫔㫔㫙㫔㫮㫤㫜㫛㫠㫘㫔㫨㫬㫜㫩㫰
    㫔㫔㫔㫔㫫㫔㫤㫦㫙㫠㫣㫜㫔㫮㫜㫙㫔㫧㫘㫞㫜

    View Slide

  71. RWD AND @MEDIA
    Which dimension as starting point ?
    Where and how to make breaking points ?
    How to test against media features ?
    Non-supporting browsers.

    View Slide


  72. 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

    View Slide

  73. RE-THINK ABOUT THE WEB DESIGN
    A Dao of Web Design
    http://www.flickr.com/photos/tahini/5810915356/

    View Slide

  74. 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.

    View Slide

  75. QUESTION :) ?

    View Slide

  76. 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

    View Slide