用一個(gè) CSS 屬性打造自適應(yīng)網(wǎng)站

英文 | https://dev.to/dip15739/responsive-website-with-only-1-css-property-3ea9
作者 | Dip Vachhani

用一個(gè)css屬性創(chuàng)建一個(gè)響應(yīng)式網(wǎng)站，讓我們來(lái)看看它是如何做到的。以這個(gè)模板為例，沒(méi)有應(yīng)用css屬性。

clamp(minimum, preferred, maximum);

在這里！你已經(jīng)完成了。

說(shuō)明

clamp()?的工作原理是“夾緊”或限制一個(gè)靈活的值，使其處于最小和最大范圍之間。

使用方法如下：

1. minimum 最小值：例如 16px

2. flexible 彈性值：例如 5vw

3. maximum 最大值：例如 34px

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

在此示例中，僅當(dāng)該值大于 16px 且小于 34px 時(shí), h1 字體大小值將為視口寬度的 5％?。

例如，如果你的視口寬度是 300px ，你的 5vw 值將等于 15px ，但是，你將該字體大小值限制為最小 16px ，因此這就是將要發(fā)生的情況。

另一方面，如果你的視口寬度為 1400px ，則 5vw 將高達(dá) 70px ！但幸運(yùn)的是，你將該最大值限制為 34px ，因此它不會(huì)超過(guò)該值。

我可以為此模板添加此代碼...

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

而從字面上看，接受任何其他長(zhǎng)度、頻率、角度、時(shí)間、百分比、數(shù)字或整數(shù)的屬性。

本文完~