CreateaFreeWebsite

 with Responsive Web Design

Clamp Function

The clamp function was added to CSS in 2020 and has become one of the most useful tools for reducing the number of break points and media queries in web development.

If you haven't already done it you should be abandoning the use of pixels in your design and begun using ems, rems and percentages of viewport width and height.

If you want to convert pixels to ems or rems simply divide by 16. Examples below:

 

Using the clamp attribute we can define 3 sizes for our text elements at the top of the style sheet and eliminate the need to resize them at set break points with media queries.

The code:
clamp(minimum , preferred , maximum)

We set a minimum size, a preferred size and a maximum size. The preferred value must fall somewhere between the minimum and maximum to work properly. The browser will use the preferred value when that condition is met.

IMPORTANT!! Spacing is important in your preferred algorithm

p {
font-size : clamp(1.125rem , 1.125rem + .25dvw , 1.375rem);
}

Translates to: clamp(18px , 18px + .0025 X viewport width , 22px)

dvw stands for dynamic viewport width. use it in place of vw. It's just more reliable.

For example, translating, 1dvw says take 1% (.01) of the viewport width .

Our minimum is set to 18 pixels and maximum to 22 pixels.

Using the formula 18px + .0025 X viewport width we calculate the font size at different viewing widths.

We start at mobile viewing width and work our way upward in viewport width.

 

Top