一个css属性实现页面响应式布局
使用 clamp()
CSS函数,可以创建仅具有一个属性的响应式网页。
clamp()
的工作原理是“夹紧”或限制一个灵活的值,使其处于最小和最大范围之间。
添加css
clamp(minimum, preferred, maximum);
使用方法如下:
minimum
最小值:例如 16px
flexible
弹性值:例如 5vw
maximum
最大值:例如 34px
事例
img {
width: clamp(15vw, 100%, 100%);
}
即:clamp()
在移动端可以动态不同分辨率的尺寸