Create Responsive Designs with CSS clamp
Create Responsive Designs with CSS clamp
Today we're going to talk about the clamp() function. If you're not familiar with it yet, clamp() allows you to set a range of values for a property, making it a great tool for creating responsive designs that adapt to different screen sizes.
Let’s see how we can use clamp() to create this responsive heading
Viewport sized typography
To create a responsive heading, you need to first know about viewport sized typography. If you already do, you can skip to the next section.
Viewport sized typography is a technique where the size of a text element is defined relative to the size of the viewport, rather than being defined in absolute units like pixels, ems, or rems. This means that the size of the text adjusts based on the size of the viewport. This is great for responsive design.
For this, we use the vw unit, which stands for "viewport width". The vw unit represents 1% of the viewport width. So, for example, 1vw is equal to 1% of the viewport width.
Example:
In this example, the font size of the h1 element will be 5% of the viewport width. This means that if the viewport width is 1000 pixels, the font size will be 50px (i.e., 5% of 1000 pixels). If the viewport width is 500 pixels, the font size will be 25px (i.e., 5% of 500 pixels).
This is a great choice for responsive font sizes. But as you can already see, this results in text that is too large for wide screens and too small for narrow devices.
Limiting the viewport based font size using clamp()
Using the clamp() function, we can solve this problem. Her’s the solution:
How does this work?
The clamp() function takes three values as arguments:
clamp(MIN, VAL, MAX)VAL: The value that the property takes by default, as long as it’s betweenMINandMAX.MIN: The miminum value that the property can take.MAX: The maximum value that the property can take.
So, in the above example, the font size of the h1 element:
Takes the default size of 5vw for intermediate screens
Doesn’t go lower than 1.8rem for smaller screens
Doesn’t go beyond 3rem for larger screens
This is a great way to make sure that the font size adapts to different screen sizes, without having to use media queries or calculate font sizes for different breakpoints.
But what if some of your users are using older browsers that don't support clamp() yet? The good news is that you can provide a fallback value using a combination of min(), max() and calc() functions.
Here's how you can acheive the same thing for older browsers:
The min() function sets the minimum font size to 1.8rem, and the max() function sets the maximum font size to 3rem. The calc() function is used to calculate the font size based on a combination of the viewport width (vw) and a pixel value (16px).
This is a simple example. You can make use of clamp() function for setting container widths, image sizes and so much more. Make sure to provide a fallback though.
Hope you learnt something new today :)
📘 I’m creating a new book!
If you loved this write-up and how it was explained, you’ll absolutely love my next eBook Level up with Tailwind CSS. Just opened pre-orders two days ago and people are grabbing it already. Check it out!
📨 Newsletter suggestion
I love Tailwind CSS. If you love it too, I highly recommend subscribing to this one 👇
Tailwind Weekly: Weekly newsletter about all things Tailwind CSS. New issue every Saturday.