-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
小职
2020-11-10
来源 ：作者：杭州程序员张张 链接：https://juejin.im/post/689276673499
阅读 812
评论 0
摘要：本篇用WEB前端 CSS属性创建了一个响应式网站，希望可以对Web前端 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);
}
复制代码
而从字面上看，接受任何其他长度、频率、角度、时间、百分比、数字或整数的属性。
关注“职坐标在线”（Zhizuobiao_Online）公众号，免费获取最新技术干货教程资源哦
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
