别再用 px 做单位了！用这个 CSS 新特性，轻松实现响应式布局

主要观点总结

文章介绍了CSS单位px在屏幕尺寸多样化的时代的不便之处，并分享了一个强大的CSS新特性——clamp()函数，它可以改变响应式样式编写方式，实现流畅的“流体式”布局。文章还详细解释了clamp()函数的使用方法及其在不同场景的应用。

关键观点总结

关键观点1: CSS单位px的问题

px是一个绝对单位，代表屏幕上的一个物理像素点。在不同尺寸的设备上，使用px会导致渲染问题，需要大量的媒体查询来适配不同尺寸的设备。

关键观点2: clamp()函数的介绍

clamp()是一个CSS数学函数，其语法为clamp(MIN, PREFERRED, MAX)。浏览器会首先尝试使用PREFERRED值，如果PREFERRED值小于MIN，则采用MIN值，反之，则采用MAX值。

关键观点3: clamp()函数在流体式字体排版中的应用

通过使用clamp()函数，可以实现在不同屏幕尺寸下字体大小的平滑过渡，真正实现“流体式”设计。

关键观点4: clamp()函数在布局中的应用

clamp()函数可以应用到任何需要动态调整的地方，如内容区块的宽度自适应。在小屏幕上，宽度是90%，但最小不会低于320px；在超大屏幕上，宽度也是90%，但最大不会超过1200px。

关键观点5: clamp()函数的浏览器兼容性

clamp()函数的浏览器兼容性已经非常好，主流浏览器已经支持。

免责声明