编程知识 cdmana.com

Only one CSS property is enough to build an adaptive website

Use one CSS Property to create a responsive website , Let's see how it works .

Take this template as an example , No application css attribute .

Use clamp() CSS function , We can create responsive websites with only one property .

Now add magic CSS

clamp(minimum, preferred, maximum);

ad locum ! You have finished

explain

clamp() It works by “ Clamp ” Or limit a flexible value , Make it between the minimum and the maximum .

How to use it is as follows :

  1. minimum minimum value : for example 16px
  2. flexible Elasticity value : for example 5vw
  3. maximum Maximum : 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 when ,h1 The font size value will be... Of the width of the viewport 5%.

for example , If you have a width of 300px, Yours 5vw The value will be equal to 15px, however , You limit the font size to a minimum 16px, So that's what's going to happen .

On the other hand , If you have a width of 1400px, be 5vw Will be as high as 70px! But fortunately , You limit the maximum to 34px, So it doesn't exceed that value .

On-line Demo:https://dip15739.github.io/Re...

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 , Accept any other length 、 frequency 、 angle 、 Time 、 percentage 、 The property of a number or an integer .


original text :https://dev.to/dip15739
author :Dip Vachhani

版权声明
本文为[Dunib]所创,转载请带上原文链接,感谢

Scroll to Top