组件

尺寸测量

通过制图式标尺读取浏览器中的实际宽度与高度。

即时边界尺寸

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.

在参考示例中

设置固定或流动宽度

虚线轮廓是编写时设置的包含块。请对照父元素，查看蓝色边框盒的实际宽度。

使用于容器尺寸参考文档.

用法与接口

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>

不要将这个外层元素插入布局父元素与子项之间；请测量父元素，或另设专用外层容器。