How to create a responsive website using only 1 css property?

Use a CSS property to create a responsive website. The following article will introduce to you how it is done. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone. [Related recommendations: CSS Video Tutorial]

Take this template as an example, no css attributes are applied.

Using the clamp() CSS function, we can create a responsive website with only one attribute.

Now add magic CSS

clamp(minimum, preferred, maximum);

Here it is! You're done

Instructions

clamp() works by "clamping" or limiting a flexible value, Make it between the minimum and maximum range.

The usage method is as follows:

1. minimum minimum value: for example 16px
2. flexible elastic value: for example 5vw
3. maximum Maximum value: for example 34px

h1 {
  font-size: clamp(16px, 5vw, 34px);
}

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

For example, if your viewport width is 300px, your 5vw value will be equal to 15px, however, you will change that font size The value is limited to a minimum of 16px, so that's what will happen.

On the other hand, if your viewport width is 1400px, then 5vw will be as high as 70px! But luckily you're limiting that maximum to 34px, so it won't exceed that.

Online Demo: https://dip15739.github.io/ResponsiveWebsite-CSSproperty/

I can add this code to this template...

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

And literally accepts any other property of length, frequency, angle, time, percentage, number, or integer.

Original text: https://dev.to/dip15739
Author: Dip Vachhani

More programming related knowledge , please visit: programming video! !

The above is the detailed content of How to create a responsive website using only 1 css property?. For more information, please follow other related articles on the PHP Chinese website!