关于前端:打造自适应网站只用一个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/Re…

我能够为此模板增加此代码 …

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