容器查询让组件根据父容器尺寸自适应，需标记容器并设container-type，用@container规则响应尺寸变化，与媒体查询互补使用。

现代CSS容器查询（Container Queries）让响应式布局不再只依赖视口宽度，而是让组件根据其父容器尺寸自主调整——这是对传统媒体查询的重要升级。它特别适合卡片、侧边栏、仪表盘等可复用模块，实现真正“局部自适应”。配合HTML结构，关键在于标记容器、启用容器作用域、再用CSS精准控制。

1. 在HTML中声明可查询的容器

容器查询需要明确指定哪些元素作为“查询上下文”。不是所有元素默认支持，必须显式启用：

• 给目标容器添加 container 属性（推荐语义化写法），例如：<section class="card" container="card"></section>
• 或使用 container-type CSS属性（更灵活，推荐用于复杂场景）：.card { container-type: inline-size; }，此时无需HTML属性
• 避免在 或全页布局根上设容器——它应是功能独立、可嵌套的模块级容器（如文章卡片、导航菜单、数据图表）

2. 使用 container-type 区分查询维度

容器查询关注的是容器自身的尺寸，而非整个屏幕。常用类型有：

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• inline-size：基于容器的行内方向宽度（最常用，对应水平流中的宽度）
• block-size：基于块方向高度（需容器有明确高度限制，如 max-height 或 height）
• size：同时监听宽高（兼容性略低，慎用）
• 注意：container-name 可选但非必需；命名主要用于多容器嵌套时精确匹配，日常开发用 container-type 足够

3. 在CSS中编写容器查询规则

语法类似媒体查询，但用 @container 替代 @media，条件基于容器尺寸：

• 基础写法：@container (min-width: 400px) { .card-title { font-size: 1.5rem; } }
• 可组合条件：@container card (width > 300px) and (width
• 支持 aspect-ratio、inline-size 等逻辑属性，例如：@container (aspect-ratio > 1/1) { .thumbnail { object-fit: cover; } }
• 务必搭配 container-type: inline-size 才生效，否则查询规则会被忽略

4. 与传统媒体查询协同使用

容器查询不取代媒体查询，而是互补：

• 媒体查询管“全局”：导航栏折叠、页脚堆叠、断点切换主栅格列数
• 容器查询管“局部”：单张卡片内标题换行策略、按钮图标是否显示、统计图表缩放比例
• 典型组合：先用媒体查询设定整体布局（如三栏→两栏→单栏），再用容器查询优化每个栏内的组件表现（如某栏内卡片自动从横排变竖排）
• 注意优先级：容器查询作用于具体组件内部，不会影响其他区域，天然避免样式冲突

不复杂但容易忽略：容器查询依赖浏览器对 container-type 的支持（Chrome 105+、Firefox 110+、Safari 16.4+），旧版本需降级为媒体查询+JS监听或使用 polyfill。实际项目中建议用 @supports (container-type: inline-size) 做特性检测后再启用。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！