Media Queries

Media queries are at the heart of responsive web design. In short, they allow us to tailor our designs based on a variety of features and aspects of the device and browser our website is viewed on.

Media queries have been around a long time. You've seen a limited version of them when attaching your style sheets.

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

Media queries can be used in a more powerful fashion when we use them as expressions that match a particular feature in our browser or device.

We use the media query inside our CSS. Here is a basic example:

@media (max-width: 600px) {
  aside {
    display: none;
  }
}

In this media query, we specify that all screens under 600px should not display any aside elements. This might be useful if our asides were actually advertisements or additional non-essential content that did not need to be displayed on smaller screens.

Media Type

We can use them to specify a variety of media types. The most common options are either screen or print style sheets.

Here is a very basic print style sheet. It's common practice to hide unnecessary elements when printing.

@media print  {
  body {
    background: white;
	 color: black;
  }
  header, aside, footer {
    display: none;
  }
}

The following media query would only apply to screens under 600px.

@media screen and (max-width: 600px) {
  body {
    color: blue;
  }
}

Possible media types: all | aural | braille | handheld | print | projection | screen | tty | tv | embossed

Media Features

We can also specify specific features that our device or media might have.

We commonly use values like min-width and max-width to dictate how our design will display. Here's a simplified version of a mobile first approach.

header, footer {
  background: black;
}
nav {
  background: green;
  padding: 1em;
}
  
@media screen and (min-width: 800px) {
  nav li {
    float: left;
    width: 20%
  }
  aside {
    float: right;
	 width: 30%;
  }
}

In this example, we're setting some very basic styles for all devices and screen sizes first. Then, we use a media query to specify only screens above 800px wide and change some layout properties.

This model takes advantage of the way block level elements stack by default. On smaller screens, we don't need to specify too many layout properties. As the screen increases in size, we can use more complex layouts.

Possible media features: width | min-width | max-width | height | min-height | max-height | device-width | min-device-width | max-device-width | device-height | min-device-height | max-device-height | aspect-ratio | min-aspect-ratio | max-aspect-ratio | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio | color | min-color | max-color | color-index | min-color-index | max-color-index | monochrome | min-monochrome | max-monochrome | resolution | min-resolution | max-resolution | scan | grid

Orientation

Orientation can be useful for identifying whether a device is wider than it is tall. Generally, this means if a device is in landscape or portrait mode.

@media all and (orientation: portrait) { 
  article h1:after {
    content: ':-)';
    display: inline-block;
    padding-left: 25px;
    transform: rotate(90deg);
  }
}

@media all and (orientation: landscape) { 
  article h1:after {
    content: '_/^\__/^^^\_';
  }
}

The exact CSS snippet above is actually in use on this page. Try changing the browser window width while watching the heading at the top of the page to see the media query in action.