CSS functions

There are lots of CSS functions; we’ve looked at many already in prior chapters. Remember, anything in CSS that is a word followed by parentheses, such as rotate() or drop-shadow(), is a CSS function. And there are far more CSS functions than I have ever used. There are functions for counters, colors, grids, shapes, and even more esoteric math functions such as pow(), mod(), and round(). However, the ones we are interested in for this chapter are the ones I have found particularly useful in solving real responsive web design problems.

The fact is, many of the CSS functions that have come along in recent years better media queries in some situations.

Want to have text that is no smaller than 16px, but then scales with the size of the viewport, yet never gets bigger than 30px?

With media queries, you would have to try to solve that problem with something like this:

.headline {
    font-size: 16px;
    @media (min-width: 400px) {
        font-size...