如何只使用1个css属性来创建响应式网站(如何只使用1个css属性来创建响应式网站的命令)

创建一个具有CSS属性的响应网站，下面的文章将介绍它是如何做到的。有一定的参考价值，有需要的朋友可以参考，希望对您有所帮助。[相关建议：CSS视频教程]

以此模板为例，没有应用css属性。

使用 clamp() CSS函数，我们可以创建一个只有一个属性的响应网站。

现在添加魔术CSS

clamp(minimum, preferred, maximum);

在这里！你已经完成了！

说明

clamp() 其工作原理是“夹紧”或限制灵活值，使其在最小和最大范围之间。

如下：

1. minimum 最小值：例如 16px
2. flexible 弹性值：例如 5vw
3. maximum 最大值：例如 34px

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

在这个例子中，只当该值大于 16px 且小于 34px 时,h1 字体大小值将是视口宽度 5％。

例如，如果你的视口宽度是， 300px，你的 5vw 值将等于 15px，但是，您将字体大小值限制为最小值 16px，所以这就是即将到来的情况。

另一方面，如果你的视口宽度是 1400px，则 5vw 将高达 70px！幸运的是，你把最大限度限制为 34px，所以它不会超过这个值。

在线Demo：https://dip15739.github.io/ResponsiveWebsite-CSSproperty/

我可以在这个模板中添加这个代码...

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

从字面上看，接受任何其他长度、频率、角度、时间、百分比、数字或整数属性。

原文：https://dev.to/dip15739
作者：Dip Vachhani

更多编程相关知识，请访问：编程视频！！

以上是如何只使用一个css属性来创建一个响应式网站？详情请关注AdminJS的其他相关文章！