SlideShare a Scribd company logo
MEDIA QUERY 123
      @ 閃光洽
ABOUT ME
  Hina Chen, a.k.a. 閃光洽
  農夫
  鐵工
  居家修繕
  http://blog.hinablue.me
BEFORE WE START...
You should know about,
    WebConf@2013 ROCK!!!
    http://webconf.hinablue.me/2013
    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!
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 on
  characteristic 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 @MEDIA
There are 3 way to go,
 1. @media with <link> tag
       㫪㫣㫠㫥㫢㫔㫩㫜㫣㫫㫔㫪㫫㫰㫣㫜㫪㫟㫜㫜㫫㫔㫔㫤㫜㫛㫠㫘㫫㫔㫪㫚㫩㫜㫜㫥㫔㫔㫟㫩㫜㫝㫫㫔㫜㫜㫜㫔㫬


 2. @media with CSS
       㫮㫤㫜㫛㫠㫘㫔㫪㫚㫩㫜㫜㫥㫔㫲㫔㫜㫜㫜㫔㫴


 3. @media with @import
       㫮㫠㫤㫧㫦㫩㫫㫔㫬㫩㫣㫖㫪㫚㫩㫜㫜㫥㫜㫚㫪㫪㫗㫔㫪㫚㫩㫜㫜㫥㫩
@MEDIA WITH DEVICES
TL;DR

CSS3 Media Queries

We just talk about,
    screen
    all
    not all
@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
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
      㫤㫘㫯㫛㫨㫔㫣㫜㫪㫪㫔㫫㫟㫘㫥㫔㫘㫥㫛㫔㫜㫨㫬㫘㫣㫔㫫㫦
      㫤㫠㫥㫛㫨㫔㫞㫩㫜㫘㫫㫜㫩㫔㫫㫟㫘㫥㫔㫘㫥㫛㫔㫜㫨㫬㫘㫣㫔㫫㫦
@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"
     㫮㫤㫜㫛㫠㫘㫔㫫㫜㫪㫫
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 DISPLAY
     DIVERSITY OF DISPLAY
ABOUT "DISPLAY"
   Desktop, laptop display
   Smartphone display
   Retina display
   All other displays
THE CHALLENGE FROM MOBILE DEVICES
  5.6 billion users at the
  early 2013.
  491.4 million mobile
  phones at 2011.



                             photocount.com
HOW MANY DISPLAY RESOLUTION WE
MUST CONSIDER ?
List of displays by pixel density
NOT
       INFINITE
          BUT
         CLOSE
        RIGHT ?
Think about the Android devices.
DESTINY
DENSITY
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.
DENSITY CONVERSION




     Designing (and converting) for multiple mobile densities
“
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   ”
DEVICE-PIXEL-RATIO
TL; 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 DEVICES
   different devices = different widths
   start with browser if possible
   wide or narrow
   retrofit existing design
   content first
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 IS YOUR CHOOSE ?




    http://www.flickr.com/photos/marfis75/8031936764/
WE START WITH MOBILE STYLES
 Narrow width




                     320x480
WE START WITH MOBILE STYLES
 Wide width




                     1280x900
WE START WITH MOBILE STYLES
 Narrow width




                     320x480
WE START WITH MOBILE STYLES
 Wide width




                     1280x900
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.
SIMPLE
  is 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 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".
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 PASTE
html5-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 QUIZ
WOULD YOU REALLY KNOW ABOUT @MEDIA ?




   http://www.flickr.com/photos/albertogp123/5843577306/
Q1: WHICH @MEDIA WILL WORK ?
  㫮㫭㫠㫜㫮㫧㫦㫩㫫㫔㫲
  㫔㫔㫔㫔㫮㫠㫛㫫㫟㫨㫔㫢㫞㫞㫧㫯㫩
  㫴

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

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

  㫮㫤㫜㫛㫠㫘㫔㫪㫚㫩㫜㫜㫥㫔㫘㫥㫛㫔㫖㫤㫠㫥㫛㫮㫠㫛㫫㫟㫨㫔㫟㫠㫞㫞㫧㫯㫗㫔㫲
  㫔㫔㫔㫔㫝㫘㫔㫭㫜㫩㫰㫔㫮㫠㫛㫜㫔㫪㫫㫰㫣㫜㫔㫘㫝
  㫴
Q2: WHICH @MEDIA WILL WORK ?
  㫮㫭㫠㫜㫮㫧㫦㫩㫫㫔㫲
  㫔㫔㫔㫔㫮㫠㫛㫫㫟㫨㫔㫧㫠㫞㫧㫯㫩
  㫴

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

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

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

narrow style will work, wide style will overwrite if the
same properties occur.

Q2:

all does not work.
YOUR ANSWER IS ALL WRONG ?




      http://www.flickr.com/photos/proimos/4199675334/
LOOK AGAIN @VIEWPORT PROPERTIES
Those can work with <meta> tag,
    width, height
    initial-scale
    minimum-scale, maximum-scale
    user-scalable
    target-densityDpi
       㫫㫘㫩㫞㫜㫫㫛㫛㫜㫥㫪㫠㫫㫰㫗㫧㫠㫔㫡㫬㫪㫫㫔㫮㫦㫩㫢㫔㫠㫥㫔㫪㫦㫤㫜㫔㫘㫥㫛㫩㫦㫠㫛㫔㫛㫜㫭㫠㫚㫜㫪㫜
@VIEWPORT IN CSS
CSS Device Adaptation
  㫮㫭㫠㫜㫮㫧㫦㫩㫫㫔㫲
  㫔㫔㫔㫔㫮㫠㫛㫫㫟㫨㫔㫛㫜㫭㫠㫚㫜㫛㫮㫠㫛㫫㫟㫩
  㫔㫔㫔㫔㫱㫦㫦㫤㫨㫔㫟㫩
  㫔㫔㫔㫔㫤㫠㫥㫛㫱㫦㫦㫤㫨㫔㫟㫩
  㫔㫔㫔㫔㫤㫘㫯㫛㫱㫦㫦㫤㫨㫔㫟㫩
  㫔㫔㫔㫔㫬㫪㫜㫩㫛㫱㫦㫦㫤㫨㫔㫝㫠㫯㫜㫛㫩
  㫔㫔㫔㫔㫦㫩㫠㫫㫜㫥㫫㫘㫫㫠㫦㫥㫨㫔㫧㫦㫩㫫㫩㫘㫠㫫㫩
  㫔㫔㫔㫔㫩㫜㫪㫦㫣㫬㫫㫠㫦㫥㫨㫔㫟㫠㫞㫛㫧㫠㫩
  㫴
@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"
WTF !




http://www.flickr.com/photos/jannemei/1023015396/
@VIEWPORT IN REAL WORLD
visual and layout viewport




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




                A tale of two viewports — part two
SO, JUST COPY AND PASTE
html5-boilerplate
   㫪㫤㫜㫫㫘㫔㫥㫘㫤㫜㫫㫔㫭㫠㫜㫮㫧㫦㫩㫫㫔㫔㫚㫦㫥㫫㫜㫥㫫㫫㫔㫮㫠㫛㫫㫟㫫㫛㫜㫭㫠㫚㫜㫛㫮㫠㫛㫫㫟㫔㫬


or this one,
   㫪㫤㫜㫫㫘㫔㫥㫘㫤㫜㫫㫔㫭㫠㫜㫮㫧㫦㫩㫫㫔㫔㫚㫦㫥㫫㫜㫥㫫㫫㫔㫮㫠㫛㫫㫟㫫㫛㫜㫭㫠㫚㫜㫛㫮㫠㫛㫫㫟㫩㫔㫠㫥㫠㫫㫠㫘㫣㫛㫪㫚㫘㫣㫜㫫㫟㫔㫬


or this one,
   㫪㫤㫜㫫㫘㫔㫥㫘㫤㫜㫫㫔㫭㫠㫜㫮㫧㫦㫩㫫㫔㫔㫚㫦㫥㫫㫜㫥㫫㫫㫔㫮㫠㫛㫫㫟㫫㫛㫜㫭㫠㫚㫜㫛㫮㫠㫛㫫㫟㫩㫔㫠㫥㫠㫫㫠㫘㫣㫛㫪㫚㫘㫣㫜㫫㫟㫩㫔㫤㫠㫥㫠㫤㫬㫤㫛㫪㫚㫘㫣
   㫜㫫㫟㫜㫞㫔㫬
RESPONSIVE WEB DESIGN
   @VIEWPORT + @MEDIA
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
                    ”
RE-THINK ABOUT THE WEB DESIGN
A 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 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.
QUESTION :) ?
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

More Related Content

Similar to Webconf 2013 - Media Query 123

Prototyping: Helping to take away the suck
Prototyping: Helping to take away the suckPrototyping: Helping to take away the suck
Prototyping: Helping to take away the suck
Harvard Web Working Group
 
Why Customers Love Responsive Design (And You Should Too!)
Why Customers Love Responsive Design (And You Should Too!)Why Customers Love Responsive Design (And You Should Too!)
Why Customers Love Responsive Design (And You Should Too!)
BrightEdge
 
Hacking For Innovation Delhi
Hacking For Innovation DelhiHacking For Innovation Delhi
Hacking For Innovation Delhi
Christian Heilmann
 
How well are you delivering your experience?
How well are you delivering your experience?How well are you delivering your experience?
How well are you delivering your experience?
Andrew Fisher
 
10 Steps To Make A Professional Article With Best SEO Strategies.pdf
10 Steps To Make A Professional Article With Best SEO Strategies.pdf10 Steps To Make A Professional Article With Best SEO Strategies.pdf
10 Steps To Make A Professional Article With Best SEO Strategies.pdf
SuperHero Marketing
 
Yahoo for the Masses
Yahoo for the MassesYahoo for the Masses
Yahoo for the Masses
Christian Heilmann
 
Programming for Non-programmers PFNP @ Razorfish
Programming for Non-programmers PFNP @ Razorfish Programming for Non-programmers PFNP @ Razorfish
Programming for Non-programmers PFNP @ Razorfish
Chris Castiglione
 
Programming for Non-Programmers - SXSW Vegas 2014
Programming for Non-Programmers - SXSW Vegas 2014Programming for Non-Programmers - SXSW Vegas 2014
Programming for Non-Programmers - SXSW Vegas 2014
Chris Castiglione
 
Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degrada...
Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degrada...Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degrada...
Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degrada...
elliotjaystocks
 
Let's Work Together
Let's Work TogetherLet's Work Together
Let's Work Together
Aquent
 
Stapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San FranciscoStapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San Francisco
Christian Heilmann
 
Erase and Rewind - Open Web Camp 2015
Erase and Rewind - Open Web Camp 2015Erase and Rewind - Open Web Camp 2015
Erase and Rewind - Open Web Camp 2015
Christian Heilmann
 
Can we make es6 the baseline of the “modern web”? - BrazilJS 2105
Can we make es6 the baseline of the “modern web”? - BrazilJS 2105 Can we make es6 the baseline of the “modern web”? - BrazilJS 2105
Can we make es6 the baseline of the “modern web”? - BrazilJS 2105
Christian Heilmann
 
The future of BYU web design
The future of BYU web designThe future of BYU web design
The future of BYU web design
Nate Walton
 
Hack Reality - awe
Hack Reality - aweHack Reality - awe
Hack Reality - awe
Alex Young
 
Responsive, Scalable and Liquid Design
Responsive, Scalable and Liquid DesignResponsive, Scalable and Liquid Design
Responsive, Scalable and Liquid Design
Ranjeet Tayi
 
Rails is not enough, by Javier Ramirez, at Conferencia Rails 2010 in Madrid, ...
Rails is not enough, by Javier Ramirez, at Conferencia Rails 2010 in Madrid, ...Rails is not enough, by Javier Ramirez, at Conferencia Rails 2010 in Madrid, ...
Rails is not enough, by Javier Ramirez, at Conferencia Rails 2010 in Madrid, ...
javier ramirez
 
Collaboration between LINE, Microsoft and AI by the developers, for the devel...
Collaboration between LINE, Microsoft and AI by the developers, for the devel...Collaboration between LINE, Microsoft and AI by the developers, for the devel...
Collaboration between LINE, Microsoft and AI by the developers, for the devel...
LINE Corporation
 
Progressive Web App Challenges
Progressive Web App ChallengesProgressive Web App Challenges
Progressive Web App Challenges
Jason Grigsby
 
Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013
Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013
Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013
Anna Dahlström
 

Similar to Webconf 2013 - Media Query 123 (20)

Prototyping: Helping to take away the suck
Prototyping: Helping to take away the suckPrototyping: Helping to take away the suck
Prototyping: Helping to take away the suck
 
Why Customers Love Responsive Design (And You Should Too!)
Why Customers Love Responsive Design (And You Should Too!)Why Customers Love Responsive Design (And You Should Too!)
Why Customers Love Responsive Design (And You Should Too!)
 
Hacking For Innovation Delhi
Hacking For Innovation DelhiHacking For Innovation Delhi
Hacking For Innovation Delhi
 
How well are you delivering your experience?
How well are you delivering your experience?How well are you delivering your experience?
How well are you delivering your experience?
 
10 Steps To Make A Professional Article With Best SEO Strategies.pdf
10 Steps To Make A Professional Article With Best SEO Strategies.pdf10 Steps To Make A Professional Article With Best SEO Strategies.pdf
10 Steps To Make A Professional Article With Best SEO Strategies.pdf
 
Yahoo for the Masses
Yahoo for the MassesYahoo for the Masses
Yahoo for the Masses
 
Programming for Non-programmers PFNP @ Razorfish
Programming for Non-programmers PFNP @ Razorfish Programming for Non-programmers PFNP @ Razorfish
Programming for Non-programmers PFNP @ Razorfish
 
Programming for Non-Programmers - SXSW Vegas 2014
Programming for Non-Programmers - SXSW Vegas 2014Programming for Non-Programmers - SXSW Vegas 2014
Programming for Non-Programmers - SXSW Vegas 2014
 
Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degrada...
Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degrada...Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degrada...
Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degrada...
 
Let's Work Together
Let's Work TogetherLet's Work Together
Let's Work Together
 
Stapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San FranciscoStapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San Francisco
 
Erase and Rewind - Open Web Camp 2015
Erase and Rewind - Open Web Camp 2015Erase and Rewind - Open Web Camp 2015
Erase and Rewind - Open Web Camp 2015
 
Can we make es6 the baseline of the “modern web”? - BrazilJS 2105
Can we make es6 the baseline of the “modern web”? - BrazilJS 2105 Can we make es6 the baseline of the “modern web”? - BrazilJS 2105
Can we make es6 the baseline of the “modern web”? - BrazilJS 2105
 
The future of BYU web design
The future of BYU web designThe future of BYU web design
The future of BYU web design
 
Hack Reality - awe
Hack Reality - aweHack Reality - awe
Hack Reality - awe
 
Responsive, Scalable and Liquid Design
Responsive, Scalable and Liquid DesignResponsive, Scalable and Liquid Design
Responsive, Scalable and Liquid Design
 
Rails is not enough, by Javier Ramirez, at Conferencia Rails 2010 in Madrid, ...
Rails is not enough, by Javier Ramirez, at Conferencia Rails 2010 in Madrid, ...Rails is not enough, by Javier Ramirez, at Conferencia Rails 2010 in Madrid, ...
Rails is not enough, by Javier Ramirez, at Conferencia Rails 2010 in Madrid, ...
 
Collaboration between LINE, Microsoft and AI by the developers, for the devel...
Collaboration between LINE, Microsoft and AI by the developers, for the devel...Collaboration between LINE, Microsoft and AI by the developers, for the devel...
Collaboration between LINE, Microsoft and AI by the developers, for the devel...
 
Progressive Web App Challenges
Progressive Web App ChallengesProgressive Web App Challenges
Progressive Web App Challenges
 
Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013
Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013
Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013
 

More from Hina Chen

Vue js 大型專案架構
Vue js 大型專案架構Vue js 大型專案架構
Vue js 大型專案架構
Hina Chen
 
Famo.us - New generation of HTML5 Web Application Framework
Famo.us - New generation of HTML5 Web Application FrameworkFamo.us - New generation of HTML5 Web Application Framework
Famo.us - New generation of HTML5 Web Application Framework
Hina Chen
 
生在幸福的 JS 年代
生在幸福的 JS 年代生在幸福的 JS 年代
生在幸福的 JS 年代
Hina Chen
 
JSDC.tw lighting talk
JSDC.tw lighting talkJSDC.tw lighting talk
JSDC.tw lighting talkHina Chen
 
3sss book
3sss book3sss book
3sss book
Hina Chen
 
Min book
Min bookMin book
Min book
Hina Chen
 
Layout presentation
Layout presentationLayout presentation
Layout presentation
Hina Chen
 
960 grid system simple howto
960 grid system simple howto960 grid system simple howto
960 grid system simple howtoHina Chen
 

More from Hina Chen (8)

Vue js 大型專案架構
Vue js 大型專案架構Vue js 大型專案架構
Vue js 大型專案架構
 
Famo.us - New generation of HTML5 Web Application Framework
Famo.us - New generation of HTML5 Web Application FrameworkFamo.us - New generation of HTML5 Web Application Framework
Famo.us - New generation of HTML5 Web Application Framework
 
生在幸福的 JS 年代
生在幸福的 JS 年代生在幸福的 JS 年代
生在幸福的 JS 年代
 
JSDC.tw lighting talk
JSDC.tw lighting talkJSDC.tw lighting talk
JSDC.tw lighting talk
 
3sss book
3sss book3sss book
3sss book
 
Min book
Min bookMin book
Min book
 
Layout presentation
Layout presentationLayout presentation
Layout presentation
 
960 grid system simple howto
960 grid system simple howto960 grid system simple howto
960 grid system simple howto
 

Recently uploaded

AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
talaatahm
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
qo1as76n
 
LGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation TemplateLGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation Template
DakshGudwani
 
Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
Carolina de Bartolo
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
k7nm6tk
 
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
hw2xf1m
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
anthonylin333
 
Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
contactproperweb2014
 
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANEEASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
Febless Hernane
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
Virtual Real Design
 
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
wkip62b
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
Jaime Brown
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
3vgr39kx
 
Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)
bagmai
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
9lq7ultg
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
pmgdscunsri
 
Divertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8djDivertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8dj
lunaemel03
 
Virtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburghVirtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburgh
millarj46
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
Bianca Woods
 
CocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdfCocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdf
PabloMartelLpez
 

Recently uploaded (20)

AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
 
LGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation TemplateLGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation Template
 
Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
 
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
 
Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
 
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANEEASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
 
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
 
Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
 
Divertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8djDivertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8dj
 
Virtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburghVirtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburgh
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
 
CocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdfCocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdf
 

Webconf 2013 - Media Query 123

  • 1. MEDIA QUERY 123 @ 閃光洽
  • 2. ABOUT ME Hina Chen, a.k.a. 閃光洽 農夫 鐵工 居家修繕 http://blog.hinablue.me
  • 3. BEFORE WE START... You should know about, WebConf@2013 ROCK!!! http://webconf.hinablue.me/2013 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!
  • 4. OK, LET'S GO. http://www.flickr.com/photos/npobre/2601582256/
  • 5. MEDIA QUERY @MEDIA
  • 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.
  • 7. WHAT THE MEDIA QUERY FOR ? Your device. And your devices.
  • 8. WHAT THE MEDIA QUERY NOT FOR ? Your feeling. NOT based on browser. Yes, it just based on @viewport size.
  • 9. @VIEWPORT ? ok, we talk about later.
  • 10. ABOUT @MEDIA There are 3 way to go, 1. @media with <link> tag 㫪㫣㫠㫥㫢㫔㫩㫜㫣㫫㫔㫪㫫㫰㫣㫜㫪㫟㫜㫜㫫㫔㫔㫤㫜㫛㫠㫘㫫㫔㫪㫚㫩㫜㫜㫥㫔㫔㫟㫩㫜㫝㫫㫔㫜㫜㫜㫔㫬 2. @media with CSS 㫮㫤㫜㫛㫠㫘㫔㫪㫚㫩㫜㫜㫥㫔㫲㫔㫜㫜㫜㫔㫴 3. @media with @import 㫮㫠㫤㫧㫦㫩㫫㫔㫬㫩㫣㫖㫪㫚㫩㫜㫜㫥㫜㫚㫪㫪㫗㫔㫪㫚㫩㫜㫜㫥㫩
  • 11. @MEDIA WITH DEVICES TL;DR CSS3 Media Queries We just talk about, screen all not all
  • 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"
  • 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 㫤㫘㫯㫛㫨㫔㫣㫜㫪㫪㫔㫫㫟㫘㫥㫔㫘㫥㫛㫔㫜㫨㫬㫘㫣㫔㫫㫦 㫤㫠㫥㫛㫨㫔㫞㫩㫜㫘㫫㫜㫩㫔㫫㫟㫘㫥㫔㫘㫥㫛㫔㫜㫨㫬㫘㫣㫔㫫㫦
  • 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
  • 15. WHEN @MEDIA ACTUALLY WORK ? Correct device with @media 㫮㫤㫜㫛㫠㫘㫔㫦㫥㫣㫰㫔㫪㫚㫩㫜㫜㫥㫔㫘㫥㫛㫔㫖㫔㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫢㫦㫞㫧㫯㫔㫗 Expressions or properties matched 㫮㫤㫜㫛㫠㫘㫔㫖㫔㫤㫠㫥㫛㫮㫠㫛㫫㫟㫨㫔㫥㫤㫦㫧㫯㫔㫗㫔㫘㫥㫛㫔㫖㫔㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫟㫞㫠㫢㫧㫯㫔㫗 "not all" 㫮㫤㫜㫛㫠㫘㫔㫫㫜㫪㫫
  • 16. WE KNOWN THE MEDIA QUERY ! YAY! http://www.flickr.com/photos/t0msk/4109452525/
  • 17. OK, TRY TO EXPLAIN THIS, 㫔㫔㫔㫔㫮㫤㫜㫛㫠㫘㫔㫦㫥㫣㫰㫔㫪㫚㫩㫜㫜㫥㫔㫘㫥㫛㫔㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫟㫠㫞㫞㫧㫯㫔㫲 㫔㫔㫔㫔㫔㫔㫔㫔㫝㫘㫔㫮㫦㫩㫢㫔㫦㫩㫔㫥㫦㫫㫭㫔㫘㫝 㫔㫔㫔㫔㫴 㫔㫔㫔㫔㫮㫤㫜㫛㫠㫘㫔㫦㫥㫣㫰㫔㫪㫚㫩㫜㫜㫥㫔㫘㫥㫛㫖㫤㫠㫥㫛㫮㫠㫛㫫㫟㫨㫔㫢㫦㫞㫧㫯㫗㫔㫘㫥㫛㫔㫖㫔㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫥㫤㫦㫧㫯㫔㫗㫔㫲 㫔㫔㫔㫔㫔㫔㫔㫔㫝㫘㫔㫮㫦㫩㫢㫔㫦㫩㫔㫥㫦㫫㫭㫔㫘㫝 㫔㫔㫔㫔㫴 㫔㫔㫔㫔㫮㫤㫜㫛㫠㫘㫔㫫㫜㫪㫫㫩㫚㫔㫪㫚㫩㫜㫜㫥㫔㫲 㫔㫔㫔㫔㫔㫔㫔㫔㫝㫘㫔㫮㫦㫩㫢㫔㫦㫩㫔㫥㫦㫫㫭㫔㫘㫝 㫔㫔㫔㫔㫴 㫔㫔㫔㫔㫮㫤㫜㫛㫠㫘㫔㫮㫤㫜㫛㫠㫘㫔㫪㫚㫩㫜㫜㫥㫔㫘㫥㫛㫔㫖㫔㫤㫦㫥㫦㫚㫟㫩㫦㫤㫜㫔㫗㫔㫲 㫔㫔㫔㫔㫔㫔㫔㫔㫝㫘㫔㫮㫦㫩㫢㫔㫦㫩㫔㫥㫦㫫㫭㫔㫘㫝 㫔㫔㫔㫔㫔㫔㫔㫔㫙㫦㫛㫰㫔㫲㫔㫚㫦㫣㫦㫩㫨㫔㫩㫜㫛㫩㫔㫴 㫔㫔㫔㫔㫴
  • 18. ALL NOT WORK, WHY? http://www.flickr.com/photos/mpilote/3304961453/
  • 19. IDENTIFY THE WRONG, 㫔㫔㫔㫔㫮㫤㫜㫛㫠㫘㫔㫦㫥㫣㫰㫔㫪㫚㫩㫜㫜㫥㫔㫘㫥㫛㫔㫖㫔㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫟㫠㫞㫞㫧㫯㫔㫗㫔㫲 㫔㫔㫔㫔㫔㫔㫔㫔㫝㫘㫔㫗㫦㫥㫕㫫㫔㫝㫦㫩㫞㫜㫫㫔㫫㫟㫜㫔㫙㫩㫘㫚㫢㫜㫫㫪㫔㫮㫠㫫㫟㫔㫤㫜㫛㫠㫘㫔㫝㫜㫘㫫㫬㫩㫜㫪㫜㫔㫘㫝 㫔㫔㫔㫔㫴 㫔㫔㫔㫔㫮㫤㫜㫛㫠㫘㫔㫦㫥㫣㫰㫔㫪㫚㫩㫜㫜㫥㫔㫘㫥㫛㫔㫖㫤㫠㫥㫛㫮㫠㫛㫫㫟㫨㫔㫢㫦㫞㫧㫯㫗㫔㫘㫥㫛㫔㫖㫔㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫥㫤㫦㫧㫯㫔㫗㫔㫲 㫔㫔㫔㫔㫔㫔㫔㫔㫝㫘㫔㫗㫦㫔㫪㫧㫘㫚㫜㫔㫙㫜㫫㫮㫜㫜㫥㫔㫔㫘㫥㫛㫔㫔㫘㫥㫛㫔㫫㫟㫜㫔㫜㫯㫧㫩㫜㫪㫪㫠㫦㫥㫔㫠㫪㫔㫥㫦㫫㫔㫘㫣㫣㫦㫮㫜㫛㫜㫔㫘㫝 㫔㫔㫔㫔㫴 㫔㫔㫔㫔㫮㫤㫜㫛㫠㫘㫔㫫㫜㫪㫫㫩㫚㫔㫪㫚㫩㫜㫜㫥㫔㫲 㫔㫔㫔㫔㫔㫔㫔㫔㫝㫘㫔㫗㫜㫤㫠㫚㫦㫣㫦㫥㫔㫫㫜㫩㫤㫠㫥㫘㫫㫜㫪㫔㫠㫥㫔㫫㫟㫜㫔㫮㫤㫜㫛㫠㫘㫔㫩㫬㫣㫜㫔㫠㫥㫔㫖㫗㫗㫜㫔㫘㫝 㫔㫔㫔㫔㫴 㫔㫔㫔㫔㫮㫤㫜㫛㫠㫘㫔㫪㫚㫩㫜㫜㫥㫔㫘㫥㫛㫔㫖㫔㫤㫦㫥㫦㫚㫟㫩㫦㫤㫜㫔㫗㫔㫲 㫔㫔㫔㫔㫔㫔㫔㫔㫝㫘㫔㫘㫟㫠㫚㫟㫔㫤㫦㫥㫦㫚㫟㫩㫦㫤㫜㫔㫪㫚㫩㫜㫜㫥㫔㫚㫘㫥㫔㫛㫠㫪㫧㫣㫘㫰㫔㫩㫜㫛㫔㫚㫦㫣㫦㫩㫔㫭㫔㫘㫝 㫔㫔㫔㫔㫔㫔㫔㫔㫙㫦㫛㫰㫔㫲㫔㫚㫦㫣㫦㫩㫨㫔㫩㫜㫛㫩㫔㫴 㫔㫔㫔㫔㫴
  • 20. @MEDIA AND DISPLAY DIVERSITY OF DISPLAY
  • 21. ABOUT "DISPLAY" Desktop, laptop display Smartphone display Retina display All other displays
  • 22. THE CHALLENGE FROM MOBILE DEVICES 5.6 billion users at the early 2013. 491.4 million mobile phones at 2011. photocount.com
  • 23. HOW MANY DISPLAY RESOLUTION WE MUST CONSIDER ? List of displays by pixel density
  • 24. NOT INFINITE BUT CLOSE RIGHT ? Think about the Android devices.
  • 26. WHY WE TALK ABOUT DENSITY ? @media work based on @viewport rule. 㫮㫭㫠㫜㫮㫧㫦㫩㫫㫔㫲 㫔㫔㫔㫔㫮㫠㫛㫫㫟㫨㫔㫢㫞㫞㫧㫯㫩 㫴 㫮㫤㫜㫛㫠㫘㫔㫦㫥㫣㫰㫔㫪㫚㫩㫜㫜㫥㫔㫘㫥㫛㫔㫖㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫢㫦㫞㫧㫯㫗㫔㫲㫔㫜㫜㫜㫔㫴 Mobile devices has lots of resolution. 㫮㫤㫜㫛㫠㫘㫔㫖㫔㫛㫮㫜㫙㫢㫠㫫㫛㫤㫠㫥㫛㫛㫜㫭㫠㫚㫜㫛㫧㫠㫯㫜㫣㫛㫩㫘㫫㫠㫦㫨㫔㫠㫔㫗㫔㫲 㫔㫔㫔㫔㫝㫘㫔㫠㫗㫟㫦㫥㫜㫢㫔㫘㫝 㫴
  • 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.
  • 28. DENSITY CONVERSION Designing (and converting) for multiple mobile densities
  • 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 ”
  • 30. DEVICE-PIXEL-RATIO TL; DR More about device-pixel-ratio List of displays by pixel density
  • 31. I DON'T WANT TO DO MATH ! Use "dppx", "vw", "vh" Resolution Units 㫟㫛㫧㫧㫯㫔㫠㫪㫔㫜㫨㫬㫠㫭㫘㫣㫜㫥㫫㫔㫫㫦㫔㫧㫤㫛㫧㫠㫜 Viewport percentage lengthes 㫟㫭㫮㫔㫠㫪㫔㫜㫨㫬㫠㫭㫘㫣㫜㫥㫫㫔㫫㫦㫔㫡㫠㫧㫯㫚㫔㫠㫝㫔㫮㫠㫛㫫㫟㫔㫦㫝㫔㫫㫟㫜㫔㫭㫠㫜㫮㫧㫦㫩㫫㫔㫠㫪㫔㫡㫠㫞㫧㫯㫜
  • 32. BACK TO MEDIA QUERY @MEDIA IN THE REAL WORLD
  • 33. DESIGN FOR DIFFERENT DEVICES different devices = different widths start with browser if possible wide or narrow retrofit existing design content first
  • 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
  • 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
  • 36. WHAT IS YOUR CHOOSE ? http://www.flickr.com/photos/marfis75/8031936764/
  • 37. WE START WITH MOBILE STYLES Narrow width 320x480
  • 38. WE START WITH MOBILE STYLES Wide width 1280x900
  • 39. WE START WITH MOBILE STYLES Narrow width 320x480
  • 40. WE START WITH MOBILE STYLES Wide width 1280x900
  • 41. WHAT'S QUERY WE HAVE ? 㫮㫤㫜㫛㫠㫘㫔㫖㫔㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫣㫣㫡㫧㫯㫔㫗 㫮㫤㫜㫛㫠㫘㫔㫖㫔㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫢㫦㫞㫧㫯㫔㫗 㫮㫤㫜㫛㫠㫘㫔㫖㫔㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫢㫢㫞㫧㫯㫔㫗 㫮㫤㫜㫛㫠㫘㫔㫖㫔㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫡㫠㫞㫧㫯㫔㫗 㫮㫤㫜㫛㫠㫘㫔㫖㫔㫤㫠㫥㫛㫮㫠㫛㫫㫟㫨㫔㫥㫤㫦㫧㫯㫔㫗㫔㫘㫥㫛㫔㫖㫔㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫧㫥㫧㫧㫯㫔㫗 㫮㫤㫜㫛㫠㫘㫔㫖㫔㫤㫠㫥㫛㫮㫠㫛㫫㫟㫨㫔㫧㫦㫞㫧㫯㫔㫗 㫮㫤㫜㫛㫠㫘㫔㫖㫔㫤㫠㫥㫛㫮㫠㫛㫫㫟㫨㫔㫟㫞㫦㫞㫧㫯㫔㫗 total 105 lines in SASS
  • 42. WHY OUR QUERIES SO ODDLY ? WHY SO MANY MEDIA QUERY WE USED ?
  • 43. THE BOOTSTRAP WAY Responsive Media Query Quick Reference
  • 44. LOOK AGAIN OUR QUERIES, Bootstrap use, 㫮㫤㫜㫛㫠㫘㫔㫖㫔㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫢㫦㫞㫧㫯㫔㫗 㫮㫤㫜㫛㫠㫘㫔㫖㫔㫤㫠㫥㫛㫮㫠㫛㫫㫟㫨㫔㫥㫤㫦㫧㫯㫔㫗㫔㫘㫥㫛㫔㫖㫔㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫧㫥㫧㫧㫯㫔㫗 㫮㫤㫜㫛㫠㫘㫔㫖㫔㫤㫠㫥㫛㫮㫠㫛㫫㫟㫨㫔㫧㫦㫞㫧㫯㫔㫗 We have, 㫮㫤㫜㫛㫠㫘㫔㫖㫔㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫣㫣㫡㫧㫯㫔㫗 㫮㫤㫜㫛㫠㫘㫔㫖㫔㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫢㫢㫞㫧㫯㫔㫗 㫮㫤㫜㫛㫠㫘㫔㫖㫔㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫡㫠㫞㫧㫯㫔㫗 㫮㫤㫜㫛㫠㫘㫔㫖㫔㫤㫠㫥㫛㫮㫠㫛㫫㫟㫨㫔㫟㫞㫦㫞㫧㫯㫔㫗
  • 45. THE QUERY REALLY DO IS... Make special size of your elements to fit the layout. 㫭㫘㫩㫔㫧㫩㫦㫤㫠㫪㫜㫔㫫㫔㫛㫦㫚㫬㫤㫜㫥㫫㫜㫙㫦㫛㫰㫜㫦㫝㫝㫪㫜㫫㫘㫠㫛㫫㫟㫔㫳㫳㫔㫛㫦㫚㫬㫤㫜㫥㫫㫜㫛㫦㫚㫬㫤㫜㫥㫫㫘㫣㫜㫤㫜㫥㫫㫜㫦㫝㫝㫪㫜㫫㫘㫠㫛㫫㫟㫔 㫳㫳㫔㫮㫠㫥㫛㫦㫮㫜㫠㫥㫥㫜㫩㫘㫠㫛㫫㫟㫩 㫠㫝㫔㫖㫔㫧㫩㫦㫤㫠㫪㫜㫔㫫㫫㫔㫤㫡㫡㫔㫗㫔㫲 㫔㫔㫔㫔㫝㫘㫔㫗㫦㫔㫰㫦㫬㫩㫔㫪㫧㫜㫚㫠㫘㫣㫔㫨㫬㫜㫩㫰㫔㫟㫜㫩㫜㫜㫔㫘㫝 㫴㫔㫜㫣㫪㫜㫔㫲 㫔㫔㫔㫔㫝㫘㫔㫙㫠㫞㫟㫫㫔㫮㫠㫫㫟㫔㫰㫦㫬㫩㫔㫗㫗㫚㫔㫘㫥㫛㫔㫗㫘㫘㫗㫔㫯㫘㫗㫗㫘㫜㫔㫘㫝 㫴
  • 46. SPECIAL WE USED 㫮㫤㫜㫛㫠㫘㫔㫖㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫣㫣㫡㫧㫯㫗㫔㫲 㫔㫔㫔㫔㫝㫘㫔㫧㫩㫜㫭㫠㫜㫮㫔㫚㫘㫩㫛㫔㫤㫘㫯㫤㫠㫬㫤㫔㫪㫠㫱㫜㫚㫔㫝㫦㫩㫚㫜㫔㫫㫦㫔㫘㫣㫠㫞㫥㫔㫚㫜㫥㫫㫜㫩㫔㫦㫝㫔㫧㫘㫞㫜㫜㫔㫘㫝 㫴
  • 47. SPECIAL WE USED 㫮㫤㫜㫛㫠㫘㫔㫖㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫟㫞㫦㫞㫧㫯㫗㫔㫲 㫔㫔㫔㫔㫝㫘㫔㫧㫩㫜㫭㫠㫜㫮㫔㫚㫘㫩㫛㫔㫤㫘㫯㫤㫠㫬㫤㫔㫪㫠㫱㫜㫚㫔㫝㫦㫩㫚㫜㫔㫫㫦㫔㫘㫣㫠㫞㫥㫔㫚㫜㫥㫫㫜㫩㫔㫦㫝㫔㫧㫘㫞㫜㫜㫔㫘㫝 㫴
  • 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.
  • 49. SIMPLE is fucking HARD
  • 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.
  • 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".
  • 53. WHY WE LEARN ABOUT @VIEWPORT ? TL; DR A tale of two viewports — part two w3c, css device adaptation
  • 54. I DO NOT WANT TO LEARN. http://www.flickr.com/photos/jdblundell/3324932274/
  • 55. OK, JUST COPY AND PASTE html5-boilerplate 㫪㫤㫜㫫㫘㫔㫥㫘㫤㫜㫫㫔㫭㫠㫜㫮㫧㫦㫩㫫㫔㫔㫚㫦㫥㫫㫜㫥㫫㫫㫔㫮㫠㫛㫫㫟㫫㫛㫜㫭㫠㫚㫜㫛㫮㫠㫛㫫㫟㫔㫬 or this one, 㫪㫤㫜㫫㫘㫔㫥㫘㫤㫜㫫㫔㫭㫠㫜㫮㫧㫦㫩㫫㫔㫔㫚㫦㫥㫫㫜㫥㫫㫫㫔㫮㫠㫛㫫㫟㫫㫛㫜㫭㫠㫚㫜㫛㫮㫠㫛㫫㫟㫩㫔㫠㫥㫠㫫㫠㫘㫣㫛㫪㫚㫘㫣㫜㫫㫟㫔㫬 or this one, 㫪㫤㫜㫫㫘㫔㫥㫘㫤㫜㫫㫔㫭㫠㫜㫮㫧㫦㫩㫫㫔㫔㫚㫦㫥㫫㫜㫥㫫㫫㫔㫮㫠㫛㫫㫟㫫㫛㫜㫭㫠㫚㫜㫛㫮㫠㫛㫫㫟㫩㫔㫠㫥㫠㫫㫠㫘㫣㫛㫪㫚㫘㫣㫜㫫㫟㫩㫔㫤㫠㫥㫠㫤㫬㫤㫛㫪㫚㫘㫣 㫜㫫㫟㫜㫞㫔㫬
  • 56. AND DO NOT ASK ME WHY ! GOOGLE IT, PLEASE. http://www.flickr.com/photos/lassi_kurkijarvi/3456993824/
  • 57. LITTLE QUIZ WOULD YOU REALLY KNOW ABOUT @MEDIA ? http://www.flickr.com/photos/albertogp123/5843577306/
  • 58. Q1: WHICH @MEDIA WILL WORK ? 㫮㫭㫠㫜㫮㫧㫦㫩㫫㫔㫲 㫔㫔㫔㫔㫮㫠㫛㫫㫟㫨㫔㫢㫞㫞㫧㫯㫩 㫴 㫮㫤㫜㫛㫠㫘㫔㫪㫚㫩㫜㫜㫥㫔㫘㫥㫛㫔㫖㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫢㫦㫞㫧㫯㫗㫔㫲 㫔㫔㫔㫔㫝㫘㫔㫥㫘㫩㫩㫦㫮㫔㫪㫫㫰㫣㫜㫔㫘㫝 㫴 㫮㫤㫜㫛㫠㫘㫔㫪㫚㫩㫜㫜㫥㫔㫘㫥㫛㫔㫖㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫥㫤㫦㫧㫯㫗㫔㫲 㫔㫔㫔㫔㫝㫘㫔㫮㫠㫛㫜㫔㫪㫫㫰㫣㫜㫔㫘㫝 㫴 㫮㫤㫜㫛㫠㫘㫔㫪㫚㫩㫜㫜㫥㫔㫘㫥㫛㫔㫖㫤㫠㫥㫛㫮㫠㫛㫫㫟㫨㫔㫟㫠㫞㫞㫧㫯㫗㫔㫲 㫔㫔㫔㫔㫝㫘㫔㫭㫜㫩㫰㫔㫮㫠㫛㫜㫔㫪㫫㫰㫣㫜㫔㫘㫝 㫴
  • 59. Q2: WHICH @MEDIA WILL WORK ? 㫮㫭㫠㫜㫮㫧㫦㫩㫫㫔㫲 㫔㫔㫔㫔㫮㫠㫛㫫㫟㫨㫔㫧㫠㫞㫧㫯㫩 㫴 㫮㫤㫜㫛㫠㫘㫔㫪㫚㫩㫜㫜㫥㫔㫘㫥㫛㫔㫖㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫢㫦㫞㫧㫯㫗㫔㫲 㫔㫔㫔㫔㫝㫘㫔㫥㫘㫩㫩㫦㫮㫔㫪㫫㫰㫣㫜㫔㫘㫝 㫴 㫮㫤㫜㫛㫠㫘㫔㫪㫚㫩㫜㫜㫥㫔㫘㫥㫛㫔㫖㫤㫘㫯㫛㫮㫠㫛㫫㫟㫨㫔㫥㫤㫦㫧㫯㫗㫔㫲 㫔㫔㫔㫔㫝㫘㫔㫮㫠㫛㫫㫔㫪㫫㫰㫣㫜㫔㫘㫝 㫴 㫮㫤㫜㫛㫠㫘㫔㫪㫚㫩㫜㫜㫥㫔㫘㫥㫛㫔㫖㫤㫠㫥㫛㫮㫠㫛㫫㫟㫨㫔㫟㫠㫞㫞㫧㫯㫗㫔㫲 㫔㫔㫔㫔㫝㫘㫔㫭㫜㫩㫰㫔㫮㫠㫛㫜㫔㫪㫫㫰㫣㫜㫔㫘㫝 㫴
  • 60. ANSWER Q1: narrow style will work, wide style will overwrite if the same properties occur. Q2: all does not work.
  • 61. YOUR ANSWER IS ALL WRONG ? http://www.flickr.com/photos/proimos/4199675334/
  • 62. LOOK AGAIN @VIEWPORT PROPERTIES Those can work with <meta> tag, width, height initial-scale minimum-scale, maximum-scale user-scalable target-densityDpi 㫫㫘㫩㫞㫜㫫㫛㫛㫜㫥㫪㫠㫫㫰㫗㫧㫠㫔㫡㫬㫪㫫㫔㫮㫦㫩㫢㫔㫠㫥㫔㫪㫦㫤㫜㫔㫘㫥㫛㫩㫦㫠㫛㫔㫛㫜㫭㫠㫚㫜㫪㫜
  • 63. @VIEWPORT IN CSS CSS Device Adaptation 㫮㫭㫠㫜㫮㫧㫦㫩㫫㫔㫲 㫔㫔㫔㫔㫮㫠㫛㫫㫟㫨㫔㫛㫜㫭㫠㫚㫜㫛㫮㫠㫛㫫㫟㫩 㫔㫔㫔㫔㫱㫦㫦㫤㫨㫔㫟㫩 㫔㫔㫔㫔㫤㫠㫥㫛㫱㫦㫦㫤㫨㫔㫟㫩 㫔㫔㫔㫔㫤㫘㫯㫛㫱㫦㫦㫤㫨㫔㫟㫩 㫔㫔㫔㫔㫬㫪㫜㫩㫛㫱㫦㫦㫤㫨㫔㫝㫠㫯㫜㫛㫩 㫔㫔㫔㫔㫦㫩㫠㫫㫜㫥㫫㫘㫫㫠㫦㫥㫨㫔㫧㫦㫩㫫㫩㫘㫠㫫㫩 㫔㫔㫔㫔㫩㫜㫪㫦㫣㫬㫫㫠㫦㫥㫨㫔㫟㫠㫞㫛㫧㫠㫩 㫴
  • 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"
  • 66. @VIEWPORT IN REAL WORLD visual and layout viewport A tale of two viewports — part two
  • 67. @VIEWPORT IN REAL WORLD visual viewport = layout viewport A tale of two viewports — part two
  • 68. SO, JUST COPY AND PASTE html5-boilerplate 㫪㫤㫜㫫㫘㫔㫥㫘㫤㫜㫫㫔㫭㫠㫜㫮㫧㫦㫩㫫㫔㫔㫚㫦㫥㫫㫜㫥㫫㫫㫔㫮㫠㫛㫫㫟㫫㫛㫜㫭㫠㫚㫜㫛㫮㫠㫛㫫㫟㫔㫬 or this one, 㫪㫤㫜㫫㫘㫔㫥㫘㫤㫜㫫㫔㫭㫠㫜㫮㫧㫦㫩㫫㫔㫔㫚㫦㫥㫫㫜㫥㫫㫫㫔㫮㫠㫛㫫㫟㫫㫛㫜㫭㫠㫚㫜㫛㫮㫠㫛㫫㫟㫩㫔㫠㫥㫠㫫㫠㫘㫣㫛㫪㫚㫘㫣㫜㫫㫟㫔㫬 or this one, 㫪㫤㫜㫫㫘㫔㫥㫘㫤㫜㫫㫔㫭㫠㫜㫮㫧㫦㫩㫫㫔㫔㫚㫦㫥㫫㫜㫥㫫㫫㫔㫮㫠㫛㫫㫟㫫㫛㫜㫭㫠㫚㫜㫛㫮㫠㫛㫫㫟㫩㫔㫠㫥㫠㫫㫠㫘㫣㫛㫪㫚㫘㫣㫜㫫㫟㫩㫔㫤㫠㫥㫠㫤㫬㫤㫛㫪㫚㫘㫣 㫜㫫㫟㫜㫞㫔㫬
  • 69. RESPONSIVE WEB DESIGN @VIEWPORT + @MEDIA
  • 70. RWD AND @MEDIA Maybe you think, 㫔㫔㫔㫔㫤㫦㫙㫠㫣㫜㫔㫮㫜㫙㫔㫧㫘㫞㫜 㫔㫔㫔㫔㫙㫔㫮㫤㫜㫛㫠㫘㫔㫨㫬㫜㫩㫰 㫔㫔㫔㫔㫫㫔㫛㫜㫪㫢㫫㫦㫧㫔㫮㫜㫙㫔㫧㫘㫞㫜 The way we use, 㫔㫔㫔㫔㫛㫜㫪㫢㫫㫦㫧㫔㫮㫜㫙㫔㫧㫘㫞㫜 㫔㫔㫔㫔㫙㫔㫮㫤㫜㫛㫠㫘㫔㫨㫬㫜㫩㫰 㫔㫔㫔㫔㫫㫔㫤㫦㫙㫠㫣㫜㫔㫮㫜㫙㫔㫧㫘㫞㫜
  • 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.
  • 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 ”
  • 73. RE-THINK ABOUT THE WEB DESIGN A Dao of Web Design http://www.flickr.com/photos/tahini/5810915356/
  • 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.
  • 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