CSS DEVELOPMENT LAB · 17

Container Queries 容器查询

Media Query 关注浏览器宽度，Container Query 关注组件自己所在容器的宽度。本实验使用同一个产品卡片组件，在宽容器、中等容器和窄侧栏中自动改变布局。

CORE DEMO

同一个组件，三种容器

下方三个区域使用完全相同的 Product Card HTML。不同之处只有父容器宽度，组件会根据容器宽度自动变成横向卡片、紧凑卡片或纵向卡片。

宽容器 · MAIN CONTENT

COMPOSITE DECKING

Professional Outdoor Decking

适合庭院、露台与商业景观的户外复合地板系统，支持多种颜色和表面纹理。

查看详情获取报价

中等容器 · CONTENT COLUMN

WALL CLADDING

Architectural Wall Cladding

适合建筑立面和室内装饰的墙板系统。

查看详情获取报价

MEDIA VS CONTAINER

响应式不只看浏览器宽度

当同一个组件可能出现在主栏、侧栏、Drawer、Modal 或 CMS 不同区域时，只靠 Media Query 很难判断组件实际拥有多少空间。

Media Query 页面级布局、全局导航、视口变化

Container Query 组件级布局、Card、Widget、可复用模块

CORE CSS

先定义容器，再查询容器

.card-container {
  container-type: inline-size;
}

@container (min-width: 620px) {
  .product-card {
    grid-template-columns:
      minmax(220px, 38%)
      minmax(0, 1fr);
  }
}

BEST USE CASES

最适合组件化项目的现代 CSS

产品卡片

主列表、侧栏推荐、Drawer 中都能复用同一个组件。

Widget

CMS 区块、WordPress 小工具、Dashboard 模块。

Modal / Drawer

同一个组件放进弹窗后，根据实际空间自动调整。

组件库

组件不用知道整个页面宽度，只关心自己拥有的空间。