Chapter 2. Media Queries – Supporting Differing Viewports
In the previous chapter, we had a brief look at the essential components for a responsive web page: a fluid layout, fluid images, and media queries.
This chapter will look in detail at media queries, hopefully providing all that's needed to fully understand their capability, syntax, and future development.
In this chapter, we shall:
- Learn why media queries are needed for a responsive web design
- Understand the media query syntax
- Learn how to use media queries in
linktags, with CSS@importstatements and within CSS files themselves - Understand what device features we can test for
- Use media queries to facilitate visual changes dependent upon available screen space
- Consider whether media queries should be grouped together or written as and where needed
- Understand the
metaviewport tag, to allow media queries to work as intended on iOS and Android devices - Consider the capabilities being proposed for future media queries specifications
The CSS3 specification is made up of a number of modules. Media Queries (Level 3) are just one of these modules. Media queries allow us to target specific CSS styles depending upon the capabilities of a device. For example, with just a few lines of CSS we can change the way content is displayed, dependent upon things such as viewport width, screen aspect ratio, orientation (landscape or portrait), and so on.
Media queries are widely implemented. Pretty much everything other than ancient versions of Internet Explorer (8 and below) support them. In short, there's absolutely no good reason not to be using them!
Tip
Specifications at the W3C go through a ratification process. If you have a spare day, knock yourself out with the official explanation of the process at http://www.w3.org/2005/10/Process-20051014/tr. The simpler version is that specifications go from Working Draft (WD), to Candidate Recommendation (CR), to Proposed Recommendation (PR) before finally arriving, many years later, at W3C Recommendation (REC). Modules at a greater maturity level than others are generally safer to use. For example, CSS Transforms Module Level 3 (http://www.w3.org/TR/css3-3d-transforms/) has been at WD status since March 2009 and browser support for it is far poorer than CR modules such as media queries.