The process of making text responsive within PostCSS shares some similarities to the postcss-responsive-images plugin we've already used, in both cases, all we need to add is a simple attribute to make our content responsive.
The plugin we need to use for text though is the PostCSS-responsive-type plugin by Sean King (available at https://github.com/seaneking/postcss-responsive-type); adding font-size, being responsive to a rule in our style sheet is enough to get us started. Of course, we almost certainly want to specify our own rules; for example, we can use something like this:
html {
font-size: responsive 12px 21px; /* min-size, max-size */
font-range: 420px 1280px; /* range of viewport widths */
}This compiles into two media queries—one at 480px, and the other at 1280px; the former sets a text size of 12px, with the latter setting 21px as the font size. Without further ado, let's get stuck in and start using this plugin in anger:
Fire up a Node.js command...