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:

6.1.1 Fixed vs. fluid: a visual thought experiment

6.1.2 The mathematical mindset

6.2 Media query logic

6.2.1 What grid and flexbox already give you

6.2.2 Why you might still need media queries

6.2.3 The math behind media queries

6.2.4 Using range syntax for cleaner media queries

6.2.5 Media query tips

6.3 Proportional layouts

6.3.1 How percentage-based layouts work

6.3.2 Nesting percentages

6.3.3 When to mix percentages with fixed units

6.3.4 Creating a liquid layout

6.4 Viewport-based units

6.4.1 The classic viewport units

6.4.2 Logical viewport units

6.4.3 The scrollbar problem

6.4.4 New viewport units: the sv*, lv*, and dv* families

6.4.5 When to use which viewport unit

6.5 Layout fluidity with CSS functions

6.5.1 Why fluid layouts matter

6.5.2 Using clamp() for fluid container widths

6.5.3 The math behind custom fluid widths

6.5.4 Calculating preferred clamp() values

6.5.5 Fluid padding and gaps

6.5.6 How to think about CSS math for layouts

6.5.7 When to bring in JavaScript

6.6 Solutions to Exercises

6.7 Summary