Responsive content without media queries using CSS Clamp()

Here's what Clamp looks like:

clamp(MIN, VAL, MAX);

Where can I use it?

length frequency angle time percentage number integer

You can use it to limit all types of values wherever you use properties like length, frequency angles, and all of the other ones listed here. In addition to measurements like percentages you can use any of the viewport measurements like 100vw, so it's way more flexible than just a adding a hard value.

The Hero

Let's say you have an hero image for your site:

<img src=img.jpg" alt="some image" />

To make this fit the width of the display, in CSS, you might try something like this:

width: 100%;

But sometimes you don't want the image to go the full width. You might want some constraints to that width. This is where clamp() can come in handy.

img {
  width: clamp(800px, 100%, 1200px);
}

This will make the image try to be 100% of the width of the container, but also no smaller than 800 pixels and no larger than 1200 pixels.

Normally, I'd take care of this by creating a div that contains the image, but clamp() is letting me put this directly on the image, so that's less, more flexible code.

Clamp with content

Let's see the content section of your site. That 100% width might get too big at times. Now, you can fix this with media queries, but clamp gives you a better way.

display: block;
margin: 0 auto;
width: clamp(800px, 100%, 1200px);

I'm adding a display block and the margin rule to make sure this images centers on our layout.

This rule makes the hero image cover 100% of the width of the container, but also be no smaller than 800 Pixels and no bigger than 1200 pixels. Normally I take care of this type of thing by wrapping my images in a container, but this is cleaner.

Content Images

I could definitely use something like this for images in the main content section of a site. The problem here is that responsive images get too big or two small, so a percentage never works well.

float: right;
width: clamp(300px, 50%, 600px);

Now you have an image that doesn't get too big or too small.

What about fonts?

You can also use this to create responsive font sizes. The typical way is to use a complex calc() function, but with the clamp() function, it's easy to establish a range of values.

font-size: clamp(2em, 4vw, 3.2em);

I'm using viewport widths here, so that's making the font responsive to the size of the browser. Just remember that 100vw means 100% of the viewport width and that would be a HUGE font size, so a fairly small size here. To me, this type of sizing is easier to read than a complex calc().

It's got pretty good browser support, so I think that unless you're supporting really old browsers it's something you can start using today.