带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计： 组件驱动式Web设计（19）

带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计： 组件驱动式Web设计（18）https://developer.aliyun.com/article/1340877?groupCode=taobaotech

比如，容器宽度（.card__container）分别在 >400px、>550px 和 >700px 时为.card设置不同样式：

代码可能像下面这样：

/* Default */
.card {
// ...
}
/* CSS Container Queries*/
.card__container {
}
/* container's width > 400px*/ @container size(width > 400px) {
.card {
// ...
}
}
/* container's width > 550px*/ @container size(width > 550px) {
.card {
// ...
}
}
/* container's width > 700px*/ @container size(width > 700px) {
.card {
// ...
}
}

Untitled @airen CodePen

（地址：https://codepen.io/airen/pen/ZEvoBYL）

（地址：https://codepen.io/airen）

（地址：https://codepen.io/）

拖动卡片右下角的滑块，改变 .card__container 容器大小，你可以看到卡片组件（.card）UI效果的变化：

@container规则，其工作方式与使用@media的媒体查询类似，但相反，@container查询父容器以获取信息，而   不是视口和浏览器的UserAgent。

容器查询的使用

到目前为止，CSS 容器查询的语法规则已经经历了多个版本更新，上面示例中展示是最新的使用方式。下面这几篇文章中可以索引到其每个版本的使用方式的差异：

1. 初探CSS容器查询
   

（地址：https://www.w3cplus.com/css/container-queries.html）

2. 容器查询给设计带来的变化
   

（地址：https://www.w3cplus.com/css/container-queries-for-design.html）

3. 容器查询中的 container和 @container
   

（地址：https://www.w3cplus.com/css/container-queries-with-container-and-at-container.html）

接下来，通一个容器查询卡片的示例来向大家展示如何使用 CSS 容器查询。

带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计： 组件驱动式Web设计（20）https://developer.aliyun.com/article/1340875?groupCode=taobaotech