This is the 7th day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

Hi, I’m Banxia 👴, a sand sculptor who has just started writing. If you like my article, you can follow ➕, like 👍 and add me on wechat: FrontendPicker. We invite you to join us to learn the frontend of communication and become better engineers. Click me to explore a new world!

preface

When doing responsive websites, we often need to consider the size of the text, the width and height of the picture, the size of the box and so on! For me personally, I use rem, REM, VH, VW and so on. For text size, I use REM and VW the most. Rem is the size relative to the root element, and VW is the size relative to the viewport width.

Text response

Consider the following scenario:

There are headings in the site that need to be displayed in different sizes on different devices.

My previous approach was this:

1 – rem solution

My first reaction was to use REM.

h1{
	font-size:2rem;
}
Copy the code

The problem with this is that since REM is relative to the root element, the font size actually stays the same no matter how your viewport changes.

Then we need to use the media query to dynamically adjust the font size of the root element based on the size of the device.

Such as:

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
  html{
    font-size:**px; }}Copy the code

This is probably the perfect solution, but if you have a large number of devices to consider, or if you have smaller sizes, you need to write a lot of CSS code

Scheme 2 – vw

If we adjust the font size according to the viewport width without considering the media query, I will consider using VW. Wv is set completely according to the viewport width.

h1{
  font-size:7vw;
}
Copy the code

However, the implementation of this scheme, although it can dynamically adjust the size of the text, but there may be extreme cases, that is, the text is very tall or very small. This is when our Clamp () comes on!

clamp()

reference

Clamp () functions clamp a value between an upper and lower limit, and when the value exceeds the minimum and maximum range, select a value between the minimum and maximum value to use. It accepts three parameters: minimum, preferred, and maximum.

grammar

Clamp (minimum, preferred, maximum);

  • When the preferred value is less than the minimum, the minimum value is used.

  • The preferred value is used when the preferred value is between the minimum and maximum value.

  • When the preferred value is greater than the maximum value, the maximum value is used.

For the h1 example above, we could write:

h1{
font-size:clamp(2rem,7vw,4rem);
}
Copy the code

When the value of 7vw converted to PX is less than the value of 2rem converted to PX, then the font size of H1 is 2rem. So h1 is always going to be somewhere between 2rem,7vw, and 4rem.

Somebody said h1, isn’t that one of these three values? Three values can also be called reactive. If you think that, you are wrong!! First, if the font size of the root element is fixed, 2rem, 4REM is fixed, but 7vw is multilayered. Clamp will be able to do more than just use media queries to set font sizes if you do a good job of dynamically sizing root elements!