With so many mobile devices on the market, we are inundated with visual volumes. This makes designing a fully responsive website extremely challenging.
CSS questions from the media have long been a tool for you. But accounting for emerging screen resolutions is increasingly difficult. If a device fails to match the visual range you have set, the results may be less than ideal.
That’s where CSS clamp() to have a positive impact. It does not depend on predefined view sizes. Instead, it provides a range of values and allows the web browser to scale an element as needed.
clamp() it does not necessarily argue for the need for media inquiries. But it might reduce the number of styles we put within them.
The following are basic examples of how clamp() they can be used to produce better responsive designs. On with us!
What is CSS clamp()?
The concept of clamp() can be a bit confusing. But stripped down to the basics, it provides a way to put together the min() and max() functions in a singular line.
So, before we go any further, it is important to note clamp() is a method for setting the minimum and maximum value of an element. That could be text, container size, or just about anything else that needs to be responsive.
A typical line might look like this:
font-size: clamp(1.125rem, 2vw, 1.5rem);
Note the first and last value. In this case, 1.125rem is the minimal value, though 1.5rem it serves as the maximum.
Still with us? Great! Now, about that rascal in the middle…
The middle number above (2vw) our better value. MDN defines it as: “The priority value is the expression whose value will be used while the result is between the minimum and maximum values.“
So, we can think of it as the border between two countries. Move left, and you are in Portugal, where the minimum value is concerned. Go right, and you are in Spain, where the maximum will be used.
The priority value can be a constant number or a mathematical expression. This allows fine-grained control over how it is calculated.
But back to our example. Taking a cue from the MDN docs, our font size will be set first 1.125rem.
However, once on our best value 2vw yes more don’t 1.125remour text will scale up to its maximum size 1.5rem.
In practice, small screens will see the minimum value, while large screens will get the maximum. The threshold is determined by the priority value.
A Few Basic Examples of clamp()
Now that we know a little more about what clamp() which does, let’s see it in action. The following are examples that demonstrate the basic capabilities of the function.
Fluid Typography that Adjusts to Screen Size
Creating responsive styles for your text can be complicated. If you stick to the desktop size, mobile phones might seem too big. But applying a new size to each CSS media query means more maintenance. And the right scaling can be a pain.
Thankfully, fluid typography is a field where CSS exists clamp() excellent. The function allows your text to scale based on the parameters you set. Best of all, what used to be required by multiple instances is replaced by a single line of code.
Here is our body and h2 text to scale based on the scene. Large ports will see larger fonts. Meanwhile, the text was shrunk accordingly on smaller screens.
Our body text will be displayed between the defined minimum and maximum values (1.125rem – 1.5remor 18px – 24px). The IS h2 the text has a minimum/maximum size 2rem – 2.75rem (32px – 44px).
See the Pen CSS clamp() Demo – Heading & Body Text by Eric Karkovack
A Container that Adjusts for Large Viewports
When dealing with responsive containers, we can’t forget about large screens. 1080p (1920 x 1080) is now serving as something of a minimum resolution for desktop and laptop devices. Therefore, it is important to consider how a layout affects these users.
A container that spans the entire width of the view can be difficult – especially if text is included. Having too many characters per line makes the text harder to read on large screens. Although this configuration is more desirable on mobile phones.
This example uses clamp() to improve the user experience across the theatres. Small screens, in the case of our maximum value 90vw yes more than our 1100px best value will be, get a wide container.
On large screens, the container will be displayed at its best value. This should make for easier reading.
Also noteworthy is our minimum value 40vw. It only applies to extremely large viewports. The value could be increased if you want to see it sooner.
See the Pen CSS clamp() Display – Container Width by Eric Karkovack
clamp() Down Your Responsive Styles
As CSS evolves, it provides us with more advanced tools. They often increase efficiency and send more of the “dirty work” to browsers. clamp() definitely fits the mold.
In this case, it means less code to maintain. By reducing the number of styles we introduce into media queries, clamp() which makes our job easier. Plus, it keeps our designs looking good across devices – even those with unique views.
Best of all, it’s supported in all modern browsers. Therefore, it is something you can immediately add to your workflow.
To learn more, please check out the resources below!
