打造自适应网站只用一个 CSS 属性就够了

发布时间:2021-03-19 发布网站:前端之家 F2er.com
前端之家收集整理的这篇文章主要介绍了打造自适应网站只用一个 CSS 属性就够了前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

用一个css属性创建一个响应式网站,让我们来看看它是如何做到的。以这个模板为例,没有应用css属性。

打造自适应网站只用一个 CSS 属性就够了

使用clamp()CSS函数,我们可以创建仅具有一个属性的响应式网站。

现在添加魔术CSS

clamp(minimum,preferred,maximum);

在这里!你已经完成了

打造自适应网站只用一个 CSS 属性就够了

说明

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,35px);

}

p {

font-size: clamp(10px,4vw,20px);

}

而从字面上看,接受任何其他长度、频率、角度、时间、百分比、数字或整数的属性。

打造自适应网站只用一个 CSS 属性就够了

原文:https://dev.to/dip15739/responsive-website-with-only-1-css-property-3ea9

作者:Dip Vachhani

总结


以上是前端之家为你收集整理的打造自适应网站只用一个 CSS 属性就够了全部内容,希望文章能够帮你解决打造自适应网站只用一个 CSS 属性就够了所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。