23年新增CSS属性 container容器查询 容器单位实现字体大小随容器变化而变化

container兼容性很好，见下图

 一、@container规则

MDN文档介绍（由于这个属性是23新出，故mdn文档里是英文版本）

@container规则，也称@container查询，可以实时匹配指定为容器元素的尺寸，开发者可以基于不同的尺寸范围，对内部的元素进行特定的样式设置与布局实现。大家应该都知道@media媒体查询中有个尺寸匹配。而@container规则有些与之类似，只是匹配的尺寸对象不同。

@media匹配的是浏览器窗体，而@container匹配的是某个元素。

所以，业界就有这样的说法，@media查询适用于宏观布局，@container查询适用于微观布局。

下面的demo就是实现字体大小随容器变化而变化的demo：（里面用到的css新属性都在下文有介绍）

<div class="con">
	<span>测试文本测试文本测试文本测试文本文本测试文本测试文本</span>
</div>

.con {
	container-type: inline-size;
 }

.con span {
	font-size: clamp(.75rem, calc(100cqw / 40), 2rem);
 }

@container (max-width: 480px) {
  .con span {
    text-align: left;
    color: red;
  }
}

 

表示文字字号在0.75rem-2rem之间变化，字号是2.5%容器宽度，算算，一行可以放40个汉字。

demo中用到了container-type属性，这个可以设置该元素成为容器元素，浏览器中可以查看元素看到。

此时 cqw 单位就相对于这个元素计算。

而demo中@container 实现的作用是容器宽度小于480px的时候左对齐，同时文字变红色，

mdn中介绍：container查询是可以指定查询某一个元素的，其中conrainer-name属性就是命名的作用

那么上面demo中并没有设置name，那么@container规则中的CSS语句，都会寻找最近的容器元素，并进行匹配。

如果页面中没有任何元素是容器元素（也就是没有元素设置container属性），则@container是不会执行的，同时cqw单位会按照浏览器窗体尺寸就像计算（等同于vw）。

所以@container规则生效的前提就是需要先声明容器元素，使用的是CSS container属性。

二、 container属性

MDN文档介绍（由于这个属性是23新出，故mdn文档里是英文版本）

container是container-name和container-type的简写属性

语法：

/* <container-name> */
container: my-layout;

/* <container-name> / <container-type> */
container: my-layout / size;

container-name：作用是给容器元素命名，这个属性在页面中存在多个容器元素的时候很有用。

container-type ：表示指向容器的类型，是水平方向的（对应宽度），还是包括垂直方向的（对应宽度和高度）。有三个值normal、size、inline-size

其中normal是默认值，表示不建立容器元素，size表示水平和垂直方向都建立，inline-size是只在水平方向建立，会给元素同时应用layout、style和inline-size容器状态

 三、cqw等容器尺寸单位

随着CSS容器查询一起出现的还有CSS容器查询单位，包括：cqw, cqh, cqi, cqb, cqmin 和 cqmax。

单位名称	释义
cqw	表示容器查询宽度（Container Query Width）占比。1cqw等于容器宽度的1%。假设容器宽度是1000px，则此时1cqw对应的计算值就是10px。
cqh	表示容器查询高度（Container Query Height）占比。1cqh等于容器高度的1%。
cqi	表示容器查询内联方向尺寸（Container Query Inline-Size）占比。默认情况下，Inline-Size指的就是水平方向，对应的是宽度，因此，1cqi通常可以看成是容器宽度的1%。
cqb	表示容器查询块级方向尺寸（Container Query Block-Size）占比。默认情况下，Block-Size指的就是垂直方向，对应的是高度，因此，1cqb通常可以看成是容器高度的1%。
cqmin	表示容器查询较小尺寸的（Container Query Min）占比，例如容器尺寸是300px*400px，则100cqmin对应的是尺寸较小的宽度300px，而非高度。
cqmax	表示容器查询较大尺寸的（Container Query Min）占比。

  如cqw的容器单位是相对于@container 规则匹配对象计算的，@container 规则匹配对象就是设置了container-type 这个CSS属性的元素。

学习于介绍2022最期待且已正式支持的CSS container容器查询 « 张鑫旭-鑫空间-鑫生活