ブラウザーのビューポート
ブラウザー枠内のiframeで、実際のドキュメントをリサイズします。
レスポンシブのプリセット
Responsive button
The presets cross the sm breakpoint inside the iframe. The padding readout comes from the real computed style.
リファレンスの見本
リファレンスのデモは、使うシステムの役割とプリセットトークンを含む独立文書をコンパイルします。
固定幅または可変幅を設定する
破線の輪郭は、記述した包含ブロックです。青いボーダーボックスの実際の幅を、親要素と見比べてください。
使用箇所： レスポンシブデザインのガイド.
使い方とインターフェース
DemoViewport は、サイトで記述した完全なドキュメント（document）かサイト URL（src）を、div.ui-browser 内の実際の iframe に表示します。ビューポート自体が教材となる場合だけブラウザーの外枠を表示します。responsive（または chrome）でアドレスのないウィンドウドットのバーを追加し、トレイのヘッダーでドキュメント名、範囲入力の隣で現在の幅を示します。それ以外は data-variant="plain" となり、外枠なしのステージをトレイの色調で区切ります。responsive は幅プリセット（widthPresets）、ui-range、Fit も追加します。theme、motion、print は教材に必要な操作だけを追加し、inspect は [data-target] 要素の算出プロパティを読み取ります。
<Demo title="Responsive specimen" frame="none" caption="Cross sm inside the iframe."> <DemoViewport title="Responsive specimen" document={html} responsive widthPresets={[{ label: 'Below sm', width: 833 }, { label: 'At sm', width: 835 }]} height={180} /></Demo><div class="ui-browser"> <div class="ui-browser-bar" aria-hidden="true"><span class="ui-browser-dots">…</span></div> <div class="ui-browser-body"><div class="ui-browser-viewport"><iframe …></iframe><span class="ui-resize"></span></div></div> <div class="ui-browser-tools" role="group">… <output class="ui-browser-size">835 px</output> …</div></div>ブレークポイント幅は有効なプリセットから取得します。上の数値は現在の sm 境界を示す例です。ページより広いプリセットはブラウザー領域内でスクロールします。端のハンドルはポインター操作の近道であり、キーボード操作には範囲入力を残します。