如何只使用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

更多程式相關知識，請造訪：程式設計影片！ ！

以上是如何只使用1個css屬性來建立響應式網站？的詳細內容。更多資訊請關注PHP中文網其他相關文章！