创建一个具有CSS属性的响应网站,下面的文章将介绍它是如何做到的。有一定的参考价值,有需要的朋友可以参考,希望对您有所帮助。[相关建议: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/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
更多编程相关知识,请访问:编程视频!!
以上是如何只使用一个css属性来创建一个响应式网站?详情请关注AdminJS的其他相关文章!
声明:本文仅供个人学习使用,来源于互联网,本文有改动,本文遵循[BY-NC-SA]协议, 如有侵犯您的权益,请联系本站,本站将在第一时间删除。谢谢你