@container 规则

原文地址：介绍2022最期待且已正式支持的CSS container容器查询

@container 可以实时匹配容器的尺寸，开发者们可以根据不同的容器尺寸范围，对内部的样式实现对应的布局和样式。

媒体查询 @media

@media (max-width:1024px) {}

该规则会在屏幕小于 1024px 时执行。
@container规则有些与之类似，只是匹配的尺寸对象不同
@media匹配的是浏览器窗体，而@container匹配的是某个元素。

@container 基本使用

效果：默认文字居中对齐；当宽度小于 500px 时，字体显示为红色，文字左对齐。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {padding: 100px;}.container {container-type: inline-size;background-color: #ccc;}.container p{text-align: center;}/* 当宽度小于 500px时，渲染 @container 规则中的语句 */@container (max-width: 500px) {.container p {text-align: left;color: red;}}</style>
</head>
<body><div class="container"><p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p></div>
</body>
</html>

container 属性

container 属性是 container-type 和 container-name 这两个属性的缩写

container-type

指示容器的方向

container-type: normal; // 默认，表示不建立容器元素
container-type: size; // 表示水平和垂直方向都建立
container-type: inline-size; // 只在水平方向建立

container-name

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

假设如下CSS代码：

@container (max-width: 480px) {p {font-weight: bold;}
}

如果页面中存在多个容器元素，则这些元素中的

元素都会应用 font-weight:bold，但我们的初衷可能就只有某一个容器元素才应用相关样式，此时 container-name 就很有作用了。

例如：

.container-a {container: inline-size aside;
}
.container-b {container: inline-size banner;
}
@container banner (max-width: 480px) {p {font-weight: bold;}
}

此时，只有banner这容器元素内的

元素才会文字加粗。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {padding: 100px;}.container-a {container-type: inline-size;container-name: aside;background-color: #ccc;}.container-b {container-type: inline-size;container-name: banner;background-color: pink;}p {text-align: center;}@container banner (max-width: 500px) {p {text-align: left;color: red;}}</style>
</head>
<body><div class="container-a"><p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p></div><div class="container-b"><p>测试2测试测试2测试测试2测试测试2测试测试2测试测试2测试测试2测试测试2测试测试2测试</p></div>
</body>
</html>

一些容器尺寸单位

单位名称	释义
cqw	表示容器查询宽度（Container Query Width）占比。1cqw等于容器宽度的1%。假设容器宽度是1000px，则此时1cqw对应的计算值就是10px。（和 vw类似，只不过一个是相对于容器宽度，一个相对于视口宽度）
cqh	表示容器查询高度（Container Query Height）占比。1cqh等于容器高度的1%（和vh相似）。
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，而非高度（和vmin相似）。
cqmax	表示容器查询较大尺寸的（Container Query Min）占比（和vmax相似）。

@container 规则相关推荐

CssVariables_01
ZC: 下面文章中,"回退值"的概念比较难懂.我的理解:出现回退值,则 var()中的第一个传入参数就自动忽略了... "回退值" 能否使用 CSS变量? Z ...
大漠老师：2022 年的 CSS，到底有哪些特性
点击上方前端Q,关注公众号回复加群,加入前端Q技术交流群关于2022年的CSS新特性,自己之前也有篇原创,CSS 的未来:Cascade Layers (CSS @layer),专门是在介绍@l ...
层出不穷的终端设备适配需求下未来的响应式Web设计长什么样？
作者:大貘响应式Web设计诞生已久,本文将带你了解响应式Web设计的前世今生,以及组件式驱动Web设计带来了哪些新变化. 自从著名设计师Ethan Marcotte在 A List Apart上发表 ...
下一代响应式Web设计：组件驱动式Web设计
自从著名设计师 Ethan Marcotte(@beep)在 A List Apart上发表了一篇名为< Responsive Web Design>的文章之后,响应式网页设计(RWD,即 ...
azure container 的命名规则
在新建一个container的时候,命名是有一系列规则的,不然就会报错.具体的规则很复杂,如不能用符号和大写字母等. 所以推荐一个简单的命名方法,所有的名称都采用小写字母(不包括任何其它字符). 转 ...
C#命名规则、开发习惯和风格
1. 文件命名组织 1-1文件命名 1. 文件名遵从Pascal命名法,无特殊情况,扩展名小写. 2. 使用统一而又通用的文件扩展名: C# 类 .cs 1-2文件 ...
web标准化设计：常用的CSS命名规则
常用的CSS命名规则头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左 ...
css规则_CSS规则，将使您的生活更轻松
css规则 by Nick Gard 尼克·加德(Nick Gard) CSS规则,将使您的生活更轻松 (CSS rules that will make your life easier) Afte ...
drools规则引擎可视化_Springboot2（60）集成规则引擎Drools
核心pom.xml 文件: <parent> <groupId>org.springframework.boot</groupId> <artifactId& ...