用一个 CSS 属性创立一个响应式网站,让咱们来看看它是如何做到的。????
以这个模板为例,没有利用 css 属性。????
应用 clamp()
CSS 函数,咱们能够创立仅具备一个属性的响应式网站。
当初增加魔术 CSS
clamp(minimum, preferred, maximum);
在这里!你曾经实现了✌
阐明
clamp()
的工作原理是“夹紧”或限度一个灵便的值,使其处于最小和最大范畴之间。
应用办法如下:
- minimum 最小值:例如
16px
- flexible 弹性值:例如
5vw
- 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