现代 CSS 新增了一些函数和属性,能够替代一整类媒体查询和 JavaScript 的取巧做法。其中最突出的有:
clamp() — 流式、有界的取值
css
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
/* │ │ └── maximum (never bigger than 3rem) */
/* │ └──────── preferred (scales with viewport) */
/* └──────────────── minimum (never smaller than 1.5rem) */
提供,它随视口平滑缩放但始终保持在边界之内——用一行代码就替代了好几个断点的 媒体查询。
