元件

尺寸測量

透過製圖式量尺，讀取瀏覽器中的實際寬度與高度。

即時邊界尺寸

Content bounds

Width · 300 px Add detail

Content bounds 測量中……

Collection panel

The subject stays inside its measured boundary.

The rule reports the actual rendered box. At narrow widths, the available space can be less than the requested width.

在參考示範中

設定固定或流動寬度

虛線外框是撰寫時設定的包含區塊。請對照父元素，查看藍色 border-box 的實際寬度。

使用於容器尺寸參考文件.

用法與介面

DemoMeasure 以 div.ui-measure 包住子元素：ui-measure-head 包含標籤與顯示實際寬高的 output，其後是 ui-measure-rule 與受測區塊。ResizeObserver 會持續更新讀值。

<DemoMeasure label="Content bounds">  <DemoSurface className="p-md">…</DemoSurface></DemoMeasure>

<div class="ui-measure">  <div class="ui-measure-head"><span>Content bounds</span><output>300 × 96 px</output></div>  <div class="ui-measure-rule" aria-hidden="true"></div>  <div>…</div></div>

不可將這個外層元素插入版面父元素與項目之間；請測量父元素，或另設專用的外層容器。