组件

容器

保持页面视口不变，调整实际外层容器的宽度。

查询卡片

Query card

容器正在测量容器……

Media

A visual region

Content

Stacks when this wrapper narrows.

Below 18rem of container width the regions stack.

改用完整页面

教学主题是视口时，请在浏览器中显示真实页面，而不是容器。

工作区布局

视口

调整 iframe 视口。在预览内滚动即可查看全部内容。

使用于响应式设计指南.

用法与接口

DemoContainer 会渲染完整托盘：ui-tray-head 中放置 title 和宽度工具，ui-stage 上放置用于测量的外层容器，并可提供 caption。maxWidth 默认为 720，用于限制调节范围；Fit 会恢复为可用宽度。

<DemoContainer title="Card width" caption="The card stacks below 18rem." maxWidth={720}>  <div className="container-inline">    <article className="p-md">The card owns its containment.</article>  </div></DemoContainer>

页面视口保持不变。示例应保留查询边界与响应式后代元素；外层容器只带有 data-demo-container 和自身宽度。