CSS容器查询

容器查询基于元素自身的尺寸变化，媒体查询基于视口尺寸变化

容器查询只能在移动端使用，媒体查询只能在桌面端使用

容器查询使用JavaScript实现，媒体查询使用CSS实现

容器查询不支持嵌套，媒体查询支持嵌套

对

错

根据设备屏幕宽度调整页面整体布局

设计可复用的组件，该组件可能被放置在页面不同宽度的区域

实现响应式图片的srcset切换

隐藏移动端导航栏

基于视口尺寸应用样式

需要预先声明容器才能使用

使用@media规则定义查询条件

样式变化不会因元素在页面中位置不同而改变

是实现组件级响应式设计的最佳方案

使用媒体查询，根据视口宽度调整卡片布局

使用容器查询，根据卡片父容器宽度调整布局

为侧边栏和主内容区的卡片分别编写独立的CSS类

结合使用媒体查询和容器查询，媒体查询处理页面布局，容器查询处理组件样式

cqi对应容器宽度，cqb对应容器高度

cqi对应容器高度，cqb对应容器宽度

两者都对应容器宽度

两者都对应容器高度

创建一个可以查询任意尺寸属性的容器

创建一个只能查询内联方向尺寸的容器，性能开销较小

创建一个不受尺寸限制的普通容器

创建一个可以查询容器字体大小的容器

container: inline-size sidebar;

container: sidebar inline-size;

container-name: sidebar; container-type: inline-size;

选项B和C都正确

最外层的容器

最内层的容器

最近的设置了container-type的祖先元素

整个页面的根元素

容器查询仅在Chrome浏览器中支持，其他浏览器需要polyfill

容器查询已在所有主流现代浏览器中得到原生支持，包括Chrome、Firefox、Safari

容器查询是实验性功能，需要通过浏览器标志启用

容器查询仅支持桌面端浏览器，移动端浏览器暂不支持

CSS.supports('container-type', 'inline-size')

CSS.supports('@container (min-width: 1px)')

@supports (container-type: inline-size) { ... }

检查window.CSSContainerQuery是否存在

@supports container-type: inline-size { ... }

.card-container { container: card size; } @container card (min-width: 400px) { .card { flex-direction: row; } }

.card-container { container-type: inline-size; } @container (min-width: 400px) { .card { display: flex; flex-direction: row; } }

.card-container { container: inline-size; } @container (width >= 400px) { .card { flex-direction: row; } }

.card { container-type: size; } @container (min-width: 400px) { .card { flex-direction: row; } }

容器查询可以实现视口级别的响应式Grid布局

Grid组件可以自适应不同宽度的容器，无需为每个位置单独编写媒体查询

容器查询可以提高Grid布局的渲染性能

Grid布局必须使用容器查询才能实现响应式效果

提高容器查询的性能

在嵌套容器场景中精确指定查询目标容器

为容器添加语义化标签

确保容器样式不会被其他CSS覆盖

多层嵌套容器时，匿名@container查询最近的祖先容器

子元素可以同时查询多个祖先容器

嵌套容器会导致性能问题，应避免使用

使用命名容器可以在嵌套场景中精确选择查询目标

容器查询只能查询直接父容器，不能跨级查询

对

错