Part 5:
Media Queries

(briefly)

media queries

<link rel='stylesheet' type='text/css' 
    media='screen' href='css/styles.css' />

<link rel='stylesheet' type='text/css' 
    media='print' href='css/print.css' />
@media screen {
  p {
    color: blue;
  }
}

@media print {
  p {
    color: red;
  }
}
  • Chrome
  • Safari
  • Firefox
  • Opera
  • IE 5

10 Media Queries (2.1)

  1. all
  2. aural
  3. handheld
  4. braille
  5. embossed
  6. print
  7. projection
  8. screen
  9. tty
  10. tv
<link media="screen" ...

<style> @import "myCSS.css"; ...

@import url(myCSS.css) screen; IE8+

@media screen {}

<?xml-stylesheet media="screen" ...

media queries

<link rel='stylesheet' 
media='screen and (min-width: 320px) and (max-width: 480px)'
href='css/smartphone.css' />
@media screen and (max-width: 480px){
  a {
    transition: background-color 200ms linear 50ms;
  }
}

@media screen and (orientation: landscape) {
  a[href^="mailto:]:before {
    content: url(icons/email.gif);
  }
}
  • Chrome
  • Safari 3.5
  • Firefox 3.5
  • Opera 9.5
  • IE 9
  • (min/max)-width: viewport width
  • (min/max)-height: viewport height
  • (min/max)-device-width: screen width
  • (min/max)-device-height: screen height
  • orientation: portrait(h>w) | landscape(w>h)
  • (min/max)-aspect-ratio: width/height
  • (min/max)-device-aspect-ratio: device-width/height
  • (min/max)-color:
  • (min/max)-color-index:
  • (min/max)-monochrome: 0 | 1+
  • (min/max)-resolution: 72dpi | 100dpcm
  • scan: progressive | interlace (tv)
  • grid: 0 | 1 (grids (like tty) or bitmap)
  • See Media Queries Spec

More Media Query Tidbits

media="only print and (color)"

media="only screen and (orientation: portrait)"

media="not screen and (color)"

media="print, screen and (min-width: 480px)"
@media screen and (-webkit-min-device-pixel-ratio: 2) {
 .iphone4 { /* high DPI */}
}
@screen and (transform-3d) {
  .transforms {}
}

Also works with (animation) and (transition)

Play with presentation window size 

body {
	-<prefix>-transition: all 1.5s linear;	
}
@media only screen and (orientation: portrait) {
	body{
	  background: indianred;
	}
}
@media only screen and (max-width: 480px) {
	body{
	  background: palegoldenrod;
	}
}

shrink this window to see the presentation change colors

Background & Borders

Next ➹