Media queries & Responsive web
by Dayton Pruet
@daytontp
http://slides.com/daytontp
responsive web example website
- Mediaqueri.es
tools
- FireFox - Responsive Design View
@media
- <link rel="stylesheet" media="screen" href="screen.css" />
- @media screen {...}
- <link rel="stylesheet" media="print" href="print.css" />
- @media print{...}
@media types
- all - all media types
- aural - for speech and sound
- braille - for braille tactile devices
- embossed - braille printers
- handheld - small and handheld devices
- print - printers
- projection - projected presentations
- screen - monitor screens
- tty - fixed pitch character grid (teletype & temrinals)
- tv - television type devices
@media query types
- width and height
- device-width and device-height
- orientation
- aspect-ration and device-aspect-ratio
- color and color-index
- monochrome
- resolution
- scan and grid
WIDTH QUeRIES
- width, max-width and minwidth
- @media screen and (max-width: 900px) {...} - means screen and less than 900px
- @media screen and (min-width: 300px) {...} - means screen and greater than 300px
- @media screen and (min-width: 300px) and (max-width: 900px) {...} - means screen and between 300px and 900px
height queries
- height, max-height and min-height
- @media screen and (max-height: 900px) {...}
- @media screen and (min-height: 300px) {...}
- @media screen and (min-height: 300px) and (max-height: 900px) {...}
device queries
- device-width and device-height
- @media (device-width: 1280px) {...}
- @media (device-height: 800px) {...}
orientation and aspect queries
- @media all and (orientation:portrait) {...}
- @media all and (orientation:landscape) {...}
- @media screen and (aspect-ration: 4/3) {...}
- @media screen and (aspect-ration: 16/9) {...}
- @media screen and (devices-aspect-ratio: 16/10) {...}
color queries
- color, min-color and max-color - number of bits per color
- @media all and (color) {...}
- @media all and (min-color: 1) {...}
- color-index, min-color-index and max-color-index - number of entries in the color lookup table
- @media all and (color-index) {...}
- @media all and (min-color-index: 1) {...}
Monocrhome queries
- monochrome, min-monochrome and max-monochrome - number of bits per pixel in monochrome frame buffer
resolution queries
- resolution, min-resolution and max-resolution - resolution of display in density (i.e. dpi & dpcm)
- @media print and (min-resolution: 300dpi) {...}
- @media print and (min-resolution: 118dpcm) {...}
scan and grid queries
- scan - scanning process of tv
- @media tv and (scan: progressive) {...}
- @media tv and (scan: interlace) {...}
- grid - whether output device is grid or bitmap (grid based is terminal or a phone with one fixed font)
- @medis handheld and (grid) and (max-width: 15em) {...}
resources
- http://www.w3.org/TR/css3-mediaqueries/
- http://www.w3schools.com/css/css_media_types.asp
- http://developer.mozilla.org/en-US/docs/CSS/Media_queries
Media queries
By Dayton Pruet
Media queries
- 720
