how to use it 1. In html, use different stylesheet for different screen size. <link rel="stylesheet" media='screen and (min-width: 320px) and (max-width: 480px)' href='css/smartphone.css' /> 2. or from CSS directly @media screen and (max-width: 480px) { a { transition: background-color 200ms linear 50ms; } } 2.5 or use orientation @media screen and (orientation: landscape) { a[href^="mailto:"]:before { content: url(icons/email.gif); } }

other specifications 1. (min/max)-width: viewport width 2. (min/max)-height: viewport height 3. (min/max)-device-width: screen width 4. (min/max)-device-height: screen height 5. orientation: portrait(h>w) | landscape(w>h) 6. (min/max)-aspect-ratio: width/height 7. (min/max)-device-aspect-ratio: device-width/height

*Media Query Syntax/Punctuation 1. media="only print and (color)" 2. media="only screen and (orientation: protrait)" 3. media="not screen and (color)" 4. media="print, screen and (min-width: 480px)" / , means or */

** Device and Capability Detection 1. @media screen and (-webkit-min-device-pixel-ratio:2) { .iphone4 {/* higher DPI */} }

  1. @media screen and (transform-3d) { .transforms {} }

  2. @media screen and (min-width: 320px) and (max-width: 500px) { @-ms-viewport {width: device-width;} }

Also works with (-prefix-animation) and (-prefix-transition)


722 0 0