Create a responsive web site with a CSS property. Let’s see how it works. 🤔

In this template, for example, CSS properties are not applied. 🖥

Using the CLAMP () CSS function, we can create a responsive web site with only one property.

Now add the magic CSS

clamp(minimum, preferred, maximum);
Copy the code

Here! You have completed ✌

instructions

Clamp () works by “clamping” or restricting a flexible value to between a minimum and maximum range.

The usage method is as follows:

  1. Minimum Minimum value: For example16px
  2. Flexible Elastic value: For example5vw
  3. Maximum Maximum value: For example34px
h1 {
  font-size: clamp(16px.5vw.34px);
}
Copy the code

In this example, the h1 font size value will be 5% of the viewport width only if the value is greater than 16px and less than 34px.

For example, if your viewport width is 300px, your 5vw value will equal 15px, but you have limited the font size value to a minimum of 16px, so this is what will happen.

On the other hand, if your viewport is 1400px wide, 5vw will be as high as 70px! But luckily, you limit that to 34px, so it won’t exceed that.

Online Demo: dip15739. Making. IO/ResponsiveW…

I can add this code for this template…

img {
  width: clamp(15vw.800%.100%);
}
h1 {
  font-size: clamp(20px.5vw.35px);
}
p {
  font-size: clamp(10px.4vw.20px);
}
Copy the code

Literally, accept any other attributes of length, frequency, Angle, time, percentage, number, or integer.

Original text: dev. To/dip15739

By Dip Vachhani