Media Queries

Contact Us or call 1-877-932-8228
Media Queries

Media Queries

What Are Media Queries?

With the advent of mobile devices - smartphones like Android or iPhone devices, or tablets like the iPad - responsive design has become a key feature of front-end web development: crafting our sites to present the same content differently depending on some aspect or feature of our visitors' viewing device. We might, for instance, show desktop users a sidebar/main-column page, with a sidebar column 1/3 of the total width on the left and a main column 2/3 of the total width on the right. Phone users might see the same content, but with each column spanning the full width of the page (which is, of course, small on a phone) but stacked with the main content on top of the sidebar content.

Media queries are the CSS tool that give us that power - the ability to apply style rules selectively, based on some feature of the user's device or browser. If a media query returns true - that is, if the maximum or minimum width, height, device width, or other feature we are querying falls within our stated value - then all of the CSS rules we include in that query will apply.

Before we look at some examples, let's check out some of the features we can target with media queries. In CSS code, all media queries take the following form:

@media screen and (max-width: 700px) {
	footer {
		display: none;

The line @media screen and (max-width: 700px) is the media query: here, we are saying "browser, please apply the following CSS only when the width of the rendering surface is a maximum of 700 pixels." (The "screen" keyword means that we are applying this rule only for the "screen" media type, as opposed to "print", "braille", or some other media type.) Inside our query can be any valid CSS code, possibly lots of CSS code. In the simple example above, we have only one CSS rule: do not display any footer element. Thus our media query would hide any footer element when the width of the browser is 700px or less.

The table below lists the more important media features that we can target:

Media Query Features
Feature Possible Values Min/Max? Explanation
color int yes bits per color component
color-index int yes number of entries in color lookup table
device-aspect-ratio int/int yes aspect ratio
device-height length (pixels) yes height of the output device
device-width length (pixels) yes width of the output device
grid int no true for a grid-based device
height length (pixels) yes height of the rendering surface
monochrome int yes bits per pixel in a monochrome frame buffer
resolution "dpi" or "dpcm" yes resolution
scan "progressive" or "interlaced" no scanning process of "tv" media types
width length (pixels) yes width of the rendering surface

Most often we will use width and device-width. The width property targets the current width of the viewing pane (so that a desktop browser dragged to a narrower width would trigger a query for max-width: 700px, if the browser were changed to be less wide than 700 pixels). The device-width property is useful if we want to target the device itself - that is, a device whose viewing pane is inherently less than 700 pixels wide.