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
link
tags, with CSS@import
statements and within CSS files themselvesUnderstand 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
meta
viewport tag, to allow media queries to work as intended on iOS and Android devicesConsider the capabilities being proposed for future media queries specifications
The CSS3 specification...