Media Queries

Media Queries are part of CSS that allows the designers to change the CSS styling based on the output device (media). There are a variety of types that can be called for:

  • all (suitable for all devices)
  • braille
  • embossed
  • handheld
  • print
  • projection
  • screen
  • tty
  • TV

The main ones that web sites are using is screen and print. Why screen? Aren’t most web sites viewing done on a screen? It really has to do with the size of the screen, this is where the power of Media queries shine.

The other common usage is print. This allows the site to modify the styling before printing. For example certain sections such as ads and images could be hidden. Colors could be muted. And links could be changed so the URL is exposed.

Some things to keep in mind; any styles not mentioned in the media query will not be adjusted. That means if the CSS says the fore ground color is green and the media query doesn’t mention changing the color, it will stay the same. Also, the order of the styles is very important. Just like regular CSS styling, media queries apply as it goes along, one could easily over write further along.

Basic structure of the query

The media query will start with @media followed by conditions that must be met for the styling to be applied.

@media print {
    // styles to be applied for printing
}

The word print could be changed to any of the device names. If the styles are to be applied to multiple types the and keyword can be used.

@media print and braille {
    // styles to be applied for printing and braille
}

In this example, it would apply to both print and braille.

Screen Size

Here is a three column layout that we’ll assume is the CSS that the media queries later will be adjusting:

#firstColumn {
    float: right;
    width: 33%;
}
#secondColumn {
    float: right;
    width: 33%;
}
#thirdColumn {
    float: right;
    width: 33%;
}
#footerSection {
    clear: both;
} 

This is a standard 3 column layout. Each column is floated to the right and set to 30% of the width. The footerSection has the float cleared to stay at the bottom.

As the browser is adjusted narrower, the columns continue to become thinner until it’s next to impossible to read any text in the column. This is fine for a desktop, but for a mobile device, users would become frustrated and leave the site.

Single break point

Starting off, we can set a single break point. Break point is where the media query will take effect. Here we’ll adjust the width.

@media screen and (max-width: 500px) {
    #firstColumn, #secondColumn, #thirdColumn {
        width: 100%;
    }
}

Here we’re telling the browser that if it’s on screen and the width is up to 500px and this styling. By setting the width to 100%, if the browser window is less then 500px, each column will expand to the full the screen and stack the columns instead of being side by side.

Please note that I’m adding screen to each of these media queries. You can drop that off. Without listing the specific type, it’ll assume all. I’m using px as the unit of measure for the break point but it could be any standard unit of measure CSS normally allows.

multiple break points

@media screen and (max-width: 750px) {
    #firstColumn, #secondColumn, #thirdColumn {
        width: 50%;
        color: green;
    }
}

@media screen and (max-width: 500px) {
    #firstColumn, #secondColumn, #thirdColumn {
        width: 100%;
    }
}

While we are still breaking at 500px, we’ve added an earlier break. Now as we adjust, at 750px the width of columns go to 50%. This means at 750px there will be 2 columns. I added a change of color to point out something. At 750px the text color will change to green. Now you might think that if the width was 450px then the color wouldn’t be green, but that’s not the case. Since the first media query sets the color to green for all screen widths less then 750px and 450px is less, then it’s green.

What if you only wanted to have green from 750 to 500? I could add a new rule to the 500 to set the color back to black (or whatever it was). Or I could try something different. I could make a more complex media query.

@media screen and (min-width: 501px) and (max-width: 750px) {
    #firstColumn, #secondColumn, #thirdColumn {
        width: 50%;
        color: green;
    }
}

@media screen and (max-width: 500px) {
    #firstColumn, #secondColumn, #thirdColumn {
        width: 100%;
    }
}

min-width says apply this to anything 501 or wider. So it’s between 501 and 750.

Printing

@media print {
    body {
        color: black;
    }
    #advertisement {
        display: none;
    }
}

I’m a little oversimplifying how much styling actually needs to be added to make a web page look good printed, but I think you get the idea. This example changes the text color to a solid black. It’s very annoying printing a page and having heading and caption be printed extremely lightly because of a color scheme. Advertisements and images may also be nice to block from printing.

I’m not saying every page should have a print media query, but if your web site makes sense to print, It would be great if you make it easy on your users.

Conclusion

This is not even scratching the surface about what the Media Queries are capable of. As I was digging into Media Queries I found this a lot more that any tutorial I’ve read so far. For example a media query can be set to pull in an entire CSS file.

Using width to set break points in media queries is very common, but it’s not the only thing that can be used to conditionally apply CSS styles.

I’m pretty certain I’ll be doing a follow up to this topic soon.

Resources

The W3C document on Media Queries

The W3C Editor’s Draft of Media Query

Wikipedia on Media Queries

MDN page on Media Queries