CSS3 Media queries

Post date: Mar 20, 2014 1:35:00 PM

Media features on their own don’t get us very far. We need a way to ask the browser about the states of the ones we care about and, well, do something about it. That’s where CSS3 media queries come in. 

Media Types:

• Screen - This css will be applied when the content is displayed on the screen

  • Features

    • aspect-ratio

    • height

    • width

    • orientation

• print - To create print stylesheet , this CSS will be applied when the content is printed

• all

• aural

• braille

• tv

Way to use the media query:

@media screen{/* CSS Rules for screens! */}

<link rel="stylesheet" type="text/css" href="print.css" media="print" /> 

Scenarios:

Apply css on the window where it is at-least 480 px wide 

@media screen and (min-width:480px) { /* CSS Rules */ } 

Render on printer or rendered on a screen that is monochrome

@media print, screen and (monochrome) { } 

Apply these styles to all media types when in landscape orientation. 

@media all and (orientation: landscape) {}

Apply these styles to black‐and‐white printers. 

@media print and (monochrome) {} 

Apply these rules to color screens. 

@media screen and (color) { } 

Apply the rules in this external stylesheet to color screens. 

<link rel="stylesheet" type="text/css" href="my.css" media="screen and (color)" /> 

Use different CSS for Mobile and Desktop

@media screen and (min-width:481px) {

    Desktop structural CSS (page 21)

}

@media screen and (max-width:480px) {

    Mobile structural CSS (page 20)

}