コンテナー
ページのビューポートを変えず、実際のラッパーの幅を調整します。
クエリーカード
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 と幅だけを設定します。