Chapter 4. Building Media Queries

The days of simply using one device to browse an online site are long since gone: responsive sites will work on a range of devices, from smart phones through to digital TVs and laptops. A key element of making sites responsive is the use of media queries. In this chapter, we'll explore how to create them using PostCSS, see how they compare to the likes of Less and SASS, and how the use of PostCSS makes for a more flexible approach in comparison to standard preprocessors. This chapter will cover the following technical topics:

• Revisiting media queries
• Working through the basics of media queries using PostCSS
• Adding responsive support
• Optimizing media queries
• Retrofitting support for older browsers
• Taking things further—exploring the hover feature in CSS4 media queries

Let's make a start…!