Media Queries

Developer

By Posted On: Feb 3, 2012

In the responsive design world, media queries are the magic behind how web pages are rendered based on the media device and screen resolution. The history behind media queries began when media types were introduced in CSS 2.1 through the media type attribute. Media types are designed to specify how a web page renders for various media output devices such as screen, print or even braille.

For example, with media types you can use the media attribute to specify a print specific stylesheet by adding the media=”print” attribute to a link tag.

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

You are also able to target media types in the stylesheets themselves with the @media keyword. For example, place the following code snippet in a section of a stylesheet to render the body font size of 10pt when the media type is print:

@media print {
      body { font-size: 10pt }
    }

Media queries came about as part of the CSS3 specification to fill some gaps with the CSS2 media types specification. By using media queries you can better determine the device and browser specific characteristics as well as the type of media device the content is being displayed on. The media query syntax takes the media type as the first argument, and a media feature expression as the second argument. The media feature argument conditionally checks the query based on the given parameters. In the following example, the media feature argument checks whether the resolution of the display is at least 980px (max-width: 959 px), and if so it applies the style.css stylesheet.

<link rel="stylesheet" type="text/css" media="screen and 
(max-width: 959px)"href="css/style.css">

You can also apply media queries in the stylesheets themselves with the @media keyword:

@media screen and (max-width: 959px) {
      body { font-size: 14px }
    }

In the examples above, the conditional nature of media queries allows you to test whether the current state of the browser meets all the requirements of the query. If the condition passes, then the media query returns True and adds the specified styling. If the condition stated in the media query fails, the value of False is returned and the subsequent styling is not used. The example above states that if the browser is of a type screen that is greater than or equal to 980 pixels in width, the condition passes and the subsequent styling will be applied. The following pseudo code may paint a better picture of how media queries work.

def media(media_type, media_feature):
        if (media_type == ‘screen’) and (media_feature >= 980):
            font_size = 14

1. In this example the function media takes in two arguments, media_type and media_feature. Just like media queries, the media function example takes in a media type as the first argument (ex. screen, print, braille) and for the second argument takes in a media query expression (ex. min-width: 980 px).

2. The media  function then tests the given data that is passed from the device against the user-defined parameters in the media query expression. In this case, if the media_type is ‘screen’ and the media media_feature is greater than or equal to 980, then set the font_size equal to 14.

3. If either the media_type of the device or the media_feature of the device do not pass, then the font size will be styled by the preceding style in the stylesheet.

One thing to take note of is that with media queries you don’t have to use the media type attribute when declaring it. You can omit the media type of the expression by replacing it with the keyword ‘all’. This will then render all media types that match the expression.

  @media all and (device-aspect-ratio: 16/9) {
  body { font-size: 14px }
}

In fact, you can completely omit ‘all’ and the subsequent keyword ‘and’ since the CSS3 specification implicitly defines these if they are left out of the expression.

@media (color) {
      h2 { color: #ffffcc }
  }

Note about Internet Explorer: Most modern browsers support the media query feature, which includes: Safari 3+, Chrome, Firefox 3.5+, Opera 7+, IE9+, Opera Mobile, and mobile Webkit.To utilize media queries with older versions of Windows Internet Explorer (IE 8 and below), you will have to use a third-party javascript polyfill such as Respond.js or css3-mediaqueries-js.

For in depth information, here is a great list of articles, resources, and other information on media query use and syntax:


How to Know if a Website Implements Media Queries

To determine whether or not your current website implements media queries you must go in the code itself and take a look. If the website is in fact utilizing media queries, either the stylesheets or the HTML documents will contain media query or media type syntax that will reveal where and how they are being used on your website. Currently, the only way media queries can be used is either through a media attribute enclosed within a <link> tag,

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

or within a stylesheet using the @media declaration:

  @media print {
      a { font-style: none }
}

If either of these are present on your website, then you are currently utilizing media queries or media types in some form or fashion. If your site is still using the CSS2 standard and either of these formats is found, you can be sure that only the media types standard is being utilized and not media queries. If your site is up to date with the CSS3 standard, then check to see if the formats of the media statements are consistent with the media query syntax.


Next Steps for Media Queries

In the current web environment there is no better way to implement a responsive and progressively enhanced website without the use of effective media queries. It is important to remember that while there are numerous frameworks and libraries currently out to aid in the development of responsive layouts, the most simple and barebones approach is usually the best. By implementing a few lines of CSS to a stylesheet, you can in turn add dynamic page rendering to a webpage so that it is styled differently on any device in regards to their display resolution and media type.

Here are example media queries for some of the most popular devices:

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
    /* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
      /* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
       /* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
      /* Styles */
}
/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
      /* Styles */
}
/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
      /* Styles */
}
/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
      /* Styles */
}
/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
      /* Styles */
}
/* iPhone 4 ----------- */@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
      /* Styles */
}

Media Query Quirks

Media Queries Are Not Supported by IE Browsers Below IE 9

Compatibility with older browsers can be supplemented with a polyfill javascript library. A polyfill/polyfiller (as defined by Paul Irish) is “A shim that mimics a future API providing fallback functionality to older browsers.”

Polyfill libraries include:

Avoid Framesets

Because most mobile devices do not support scrollbars, framesets are rendered to fit all of their content in a single window, which eliminates the reason for having a responsive website.

Instead use columns and blocks to structure content.

Viewport Meta Tag

Include the following code in the <head> of the HTML document:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Most mobile browsers resize the viewport to a wide view; this meta tag resets this feature.

This tag tells the browser to use the device width as the viewport width and to disable any initial scaling.

Back to top

Back to top