From the course: CSS Toolkit: Tips and Techniques for Layout and Styling

Unlock this course with a free trial

Join today to access over 24,700 courses taught by industry experts.

Responsive sizing with min(), max(), and clamp()

Responsive sizing with min(), max(), and clamp() - CSS Tutorial

From the course: CSS Toolkit: Tips and Techniques for Layout and Styling

Start my 1-month free trial Buy for my team

Responsive sizing with min(), max(), and clamp()

“

- [Instructor] With responsive design, sometimes text and layouts lack consistency across devices. For example, you might have a headline that's perfectly sized for desktop, but it looks massive on mobile. Or you might get paragraphs that feel really cramped on one screen, but the line height is way too much on another, et cetera. As developers, we have to make decisions about font sizes and layouts at different screen sizes, and we've traditionally used media queries to solve for this, but it's not the most flexible approach. Take this example. We have our mobile default font size inheriting 20 pixels from the root element here. And then we have a media query that says, hey, when we get to a certain width, let's bump the font size up to 1.3 rem. This setup works, but it forces an abrupt jump between sizes rather than smooth scaling. That's where min, max, and clamp come in. So first I'm going to get rid of this media query because we don't need that anymore. So let's start with the…

Contents