无需登录 数据私有 本地保存

CSS 容器查询实验室 - 基于卡片宽度的响应式布局

11
0
0
0

CSS 容器查询实验室

拖拽手柄或使用滑块调整容器宽度，观察卡片如何基于自身容器宽度（而非视口）进行响应式布局

ProPods X3 无线降噪耳机

¥1,299
★★★★☆ 4.8 (2,386条评价)

自适应主动降噪 | 空间音频 | 40小时续航 | IPX5防水 | 多点连接

免运费 2年质保 30天退换
加入购物车
数据面板
用户管理
消息中心
系统设置
通知提醒
帮助文档

容器查询：响应式设计的新范式

传统的媒体查询基于视口宽度来调整样式，而容器查询允许组件根据其自身容器的大小进行响应。这意味着同一个组件在不同上下文中可以自动适配——无论它被放在侧边栏、主内容区还是模态框中。这项技术彻底改变了组件驱动型设计的方式，让真正的"一次开发，处处运行"成为现实。

📅 2024年发布 · 🏷️ CSS · ⏱️ 阅读时间：3分钟
容器宽度: 340px 默认（窄布局）
实时 CSS 代码
高亮 = 当前生效规则 

        

      

    


    
    

      

        

          
          
container-type

          
将元素声明为查询容器
inline-size 响应宽度变化

        

      

      

        

          
          
container-name

          
为容器命名（可选）
@container name (条件)

        

      

      

        

          
          
@container 规则

          
基于容器尺寸设置样式
支持 min-width / max-width

        

      

    


    
    

      

        常见问题与知识点
      

      

        

          

            

              
            

            

              

                CSS 容器查询是一种允许开发者根据父容器的尺寸（而非浏览器视口大小）来设置元素样式的技术。通过 container-type 声明容器，使用 @container 规则定义断点条件。这使得组件可以根据其所处的上下文自动调整布局，实现了真正可复用的响应式组件。浏览器支持：Chrome 105+、Safari 16+、Firefox 110+、Edge 105+。
              

            

          

        

        

          

            

              
            

            

              

                媒体查询基于视口（viewport）的尺寸，适合页面级别的布局调整（如导航栏切换、整体栅格变化）。

                容器查询基于父容器的尺寸，适合组件级别的样式调整（如卡片内部布局、字体大小）。

                关键优势：同一个组件在侧边栏（窄容器）和主内容区（宽容器）中会自动呈现不同的布局，无需额外的CSS类或JS逻辑。这使得组件真正实现了上下文无关的响应式设计。
              

            

          

        

        

          

            

              
            

            

              

                container-type 有三个主要取值：

                · inline-size：容器响应内联轴尺寸（水平书写模式下即宽度），最常用。

                · size：容器同时响应宽度和高度变化（注意：使用此值时需显式设置容器的高度）。

                · normal：默认值，不创建容器查询上下文。


                示例：.card-wrapper { container-type: inline-size; } 即可将该元素变为查询容器。
              

            

          

        

        

          

            

              
            

            

              

                使用 container-name 可以为容器指定一个名称，在 @container 规则中引用该名称来精确匹配目标容器。

                语法：container-name: sidebar; 配合 @container sidebar (min-width: 300px) { ... }

                短写形式：container: sidebar / inline-size;（同时设置名称和类型）

                如果不指定名称，@container 会匹配最近祖先查询容器。命名容器在多容器嵌套场景中非常有用。
              

            

          

        

        

          

            

              
            

            

              

                支持的查询条件包括：

                · min-width / max-width — 最小/最大宽度

                · min-height / max-height — 最小/最大高度（需 container-type: size）

                · aspect-ratio / orientation — 宽高比/方向

                支持逻辑运算符：and、or、not。

                示例：@container (min-width: 400px) and (max-width: 700px) { ... }

                也支持范围语法：@container (300px <= width <= 600px) { ... }
              

            

          

        

        

          

            

              
            

            

              

                ① 可复用卡片组件：同一张产品卡片在侧边栏（窄）、主内容区（中）、全宽横幅（宽）中自动展示不同布局。

                ② 仪表盘面板：面板内部网格根据面板大小自动调整列数。

                ③ 文章排版：文章容器根据宽度自动调整字号、行距、分栏。

                ④ 模态框/对话框：弹窗内容根据弹窗大小自适应。

                ⑤ 多栏布局中的组件：在不同列宽的布局中，组件自动适配。
              

            

          

        

        

          

            

              
            

            

              

                容器查询在现代浏览器中获得广泛支持（Chrome 105+、Safari 16+、Firefox 110+、Edge 105+，覆盖约93%+用户）。对于需要兼容旧浏览器的项目，可采用渐进增强策略：先定义一套基础的默认样式（窄布局），再通过 @container 添加增强样式。不支持容器查询的浏览器会忽略 @container 规则，显示默认布局，不会导致功能性问题。可使用 @supports (container-type: inline-size) 进行特性检测。
              

            

          

        

        

          

            

              
            

            

              

                容器查询与CSS Grid/Flexbox是互补关系：

                · Grid/Flexbox 负责子元素的排列和分配空间。

                · 容器查询 负责根据容器尺寸切换不同的布局模式或调整样式属性。

                常见组合：在容器查询中改变 Grid 的 grid-template-columns 列数，或切换 Flexbox 的 flex-direction。本工具中的"自适应网格"场景就展示了这一组合——容器宽度变化时，网格列数从1列→2列→3列自动切换。
              

            

          

        

      

    

  










 🔧 相关工具