其他
打造自适应网站只用一个CSS属性就够了
clamp()
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
,因此它不会超过该值。img {
width: clamp(15vw, 800%, 100%);
}
h1 {
font-size: clamp(20px, 5vw, 35px);
}
p {
font-size: clamp(10px, 4vw, 20px);
}
原文:https://dev.to/dip15739/responsive-website-with-only-1-css-property-3ea9
作者:Dip Vachhani
推荐阅读