CSS Media Queries

R. Alexander Miłowski

milowski@ischool.berkeley.edu

School of Information, UC Berkeley

Media-Oriented CSS in HTML

In HTML, you can conditionalize CSS styles by media:

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

The browser:

The list of media tokens is a controlled vocabulary.

CSS Media Queries

A group of CSS rules can be wrapped outside of HTML:

@media screen {
   color: green;
   background-color: black;
}
@media print {
   color: black;
   background-color: white;
}
         

But wait, there's more!

Example: Viewport Width

@media only screen and (min-width: 250px) {
   body {
      background-color: red;
   }
}
@media only screen and (min-width: 500px) {
   body {
      background-color: green;
   }
}
@media only screen and (min-width: 800px) {
   body {
      background-color: blue;
   }
}            
         

Example: Orientation

@media only screen and (orientation: portrait) {
   body {
      background-color: green;
   }
}
@media only screen and (orientation: landscape) {
   body {
      background-color: red;
   }
}
         

Example: iOS / Android Mobile

@media 
   only screen and (min-device-width: 320px) 
               and (max-device-width: 736px) 
               and (orientation: portrait),
   only screen and (min-device-width: 320px) 
               and (max-device-width: 736px) 
               and (orientation: landscape) {
   // your style here!
}            
         

For More Information

MDN - CSS media queries

Media Queries - W3C Recommendation 19 June 2012

CSS Media Queries Testing Site (among many ...)