clamp() is a function used in CSS to create responsive typesetting, allowing the definition of minimum, preferred and maximum values, with the syntax of clamp(MIN, VAL, MAX); for example, font-size: clamp(16px, 2vw 1rem, 24px) indicates that the font size changes with the viewport but limits the range; recommended writing methods such as h1 { font-size: clamp(1.5rem, 5vw, 3rem); } Ensure readability under different screens; in addition to fonts, it can also be used for attributes such as line-height, padding, margin, width, etc.; such as p { padding-inline: clamp(1rem, 5%, 2rem); } Control internal margins; mainstream browsers all support clamp(), and setting parameters reasonably can reduce media queries and improve visual consistency.

Responsive typesetting is an important part of modern web design, and the emergence of clamp() function in CSS makes this more flexible and concise. It allows you to define a font size that is smoothly adjusted as the viewport changes, rather than relying on breakpoints or complex calculations.

What is clamp()?

clamp() is a CSS function that allows you to set the minimum, preferred and maximum range of a value. Its syntax is:

 clamp(MIN, VAL, MAX)

in:

• MIN is the minimum value;
• VAL is the preferred value (usually calculated dynamically);
• MAX is the maximum value.

For example:

 font-size: clamp(16px, 2vw 1rem, 24px);

This means that the font size will start at 16px and grow with the viewport width, but not exceed 24px.

How to use clamp() to make responsive font size?

The core idea of using clamp() to achieve responsive font size is: set a basic font size and make it scale according to the viewport width while maintaining readability and aesthetics.

The recommended writing method is as follows:

 h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

This means:

• When the screen is small, the title will not be less than 1.5rem ;
• At medium screen size, it scales at 5vw ;
• After arriving at the large screen, the font will not exceed 3rem .

Tips: The vw unit is very useful, but it is not the only option. You can use more flexible expressions in combination with rem and vw , such as 2vw 1rem , which can retain a certain base size on the small screen.

Where can clamp() be applied?

Although most commonly used for font sizes, clamp() can be used in any CSS attribute that accepts length, frequency, angle and other types, such as:

• Line-height
• Padding
• Margin
• Element width (width)

For example, if you want the left and right margins of the paragraph to increase as the screen widens, but don't want it to be too big, you can write it like this:

 p {
  padding-inline: clamp(1rem, 5%, 2rem);
}

This not only ensures that the content will not be pasted, but also avoids the problem of too centering the text under the large screen.

How about browser compatibility?

Currently, mainstream browsers support clamp() , including Chrome, Edge, Firefox, Safari and mobile browsers. If you need to be compatible with older versions of IE, that may not be a good fit, but for most modern projects, this is not a problem.

Note: If you use an expression like calc() , make sure that the writing format is correct, such as spaces cannot be omitted:

 font-size: clamp(1rem, calc(1rem 2vw), 2rem);

---

Basically that's it. Using clamp() well can not only reduce the use of media queries, but also make the page look more natural on different devices. The key is to set MIN, VAL and MAX reasonably to find the visual balance point.

The above is the detailed content of Responsive typography with clamp() CSS tutorial. For more information, please follow other related articles on the PHP Chinese website!