标签：clamp 16px 就够 5vw 只用 34px font CSS 属性
用一个css属性创建一个响应式网站，让我们来看看它是如何做到的。以这个模板为例，没有应用css属性。
使用 clamp() CSS函数，我们可以创建仅具有一个属性的响应式网站。
现在添加魔术CSS
clamp(minimum, preferred, maximum);
在这里！你已经完成了
http://www.ssnd.com.cn 化妆品OEM代加工
说明
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);
}
而从字面上看，接受任何其他长度、频率、角度、时间、百分比、数字或整数的属性。
标签：clamp,16px,就够,5vw,只用,34px,font,CSS,属性 来源： https://www.cnblogs.com/xiaonian8/p/15003657.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。