6 The mathematics of responsive design
This chapter covers
- Understanding the math behind media queries
- Using percentages to create proportional layouts
- Adapting to screen size with viewport units
- Creating fluid layouts with CSS functions
As a web designer or developer, you know that making your pages responsive is the right choice because it makes content usable on a wide variety of devices (phones, tablets, desktops, TVs, and so on), ensures that content remains legible and interactive—in a word, accessible—without zooming, pinching, or panning, improves performance by avoiding heavy or redundant layouts, enhances search engine optimization since Google favors mobile-friendly designs in search rankings, and increases maintainability because a single responsive codebase is easier to manage than separate versions for mobile and desktop.
But what you might not realize is that behind every good responsive layout is a foundation of mathematical thinking and the goal of this chapter is to expose that foundation so that you can make smarter choices when designing and implementing your responsive layouts.
6.1 The concept of responsiveness in web design
At its most basic, you could say that responsive design is about adaptation. That is, your layout must adapt itself to whatever screen sizes or device capabilities it comes across. This adaptative behavior has many facets, but at its core it means three things: