For anyone creating responsive sites, media queries are a core part of this process—PostCSS can easily help with creating the appropriate media queries that are needed for our projects. We've covered a number of key topics over the last few pages, so let's take a moment to consider what we've covered in this chapter.
For anyone creating responsive sites, media queries are a core part of this process—PostCSS can easily help with creating the appropriate media queries that are needed for our projects. We've covered a number of key topics over the last few pages, so let's take a moment to consider what we've covered in this chapter.
We kicked off with a quick review of standard media queries in CSS, before altering our code to use PostCSS as the basis for our queries. We then put this to good use in making images responsive, with a look first at the options available in PostCSS, before working through an example using PostCSS. We then switched to a common use of media queries for images, with a look at switching in a high resolution version for those devices that support their use.
We then switched to making text responsive, and discovered that it is a similar process that takes place, albeit using a different plugin. We then moved onto look at optimizing queries using PostCSS, before a quick review of some of the options available when retrofitting support for older browsers. We then rounded out the chapter to look at how we can use alternative techniques to make our sites responsive, without the need for media queries, before finishing with discovering a small part of what is available within CSS4, and how PostCSS can be used to make those techniques available today.
Phew, we certainly covered a lot: it doesn't stop there though! The next stop on our journey promises to be just as interesting; every website or online application will use different fonts, images, or colors in some form throughout the site. We'll take a look at how we can use PostCSS to make our lives just that little bit easier….