Table of Contents

响应式CSS让文字适应容器等比缩放

CSS clamp函数

clamp()函数作用是返回一个区间范围的值。语法如下：

clamp(MIN, VAL, MAX)

其中MIN表示最小值，VAL表示首选值，MAX表示最大值。意思是，如果VAL在MIN和MAX范围之间，则使用VAL作为函数返回值；如果VAL大于MAX，则使用MAX作为返回值；如果VAL小于MIN，则使用MIN作为返回值。

容器查询它给予了CSS在不改变浏览器视口大小的前提下，只根据容器的大小变化，对布局做调整的能力。

容器查询带来了很多新的单位，其中有：

cqw 容器查询宽度（Container Query Width）占比。1cqw 等于容器宽度的 1%。假设容器宽度是 1000px，则此时 1cqw 对应的计算值就是 10px。
cqh 容器查询高度（Container Query Height）占比。1cqh 等于容器高度的 1%。
cqi 表示容器查询内联方向尺寸（Container Query Inline-Size）占比。这个是逻辑属性单位，默认情况下等同于 cqw
cqb 容器查询块级方向尺寸（Container Query Block-Size）占比。同上，默认情况下等同于 cqh
cqmin 容器查询较小尺寸的（Container Query Min）占比。取 cqw 和 cqh 中较小的一个
cqmax 表示容器查询较大尺寸的（Container Query Min）占比。取 cqw 和 cqh 中较大的一个

对于容器查询的一个实战，可以查看CSS实现不定宽溢出文本适配滚动