简体中文
简体中文
# 长度单位
- 长度
<length>用于表示距离尺寸的 CSS 数据类型。许多 CSS 属性会用到长度，比如 width、margin、padding。 - 长度
<percentage>表述一个百分比值。许多 CSS 属性 可以取百分比值，用以根据父对象来确定大小。百分比值由一个<number>具体数值后跟着%符号构成。就像其他在 css 里的单位一样，在%和数值之间是不允许有空格的。 rpx是一个以设备750px为基准的单位，750rpx即为屏幕宽度，375rpx即为屏幕一半宽度。它比较适合适配不同宽度的手机。但rpx的性能和精度不如px，如果px可满足需求，尽量使用px。
| 名称 | 兼容性 | 描述 |
|---|---|---|
| % | app平台仅width、height、padding(-)、margin(-)、top、left、right、bottom、flex-basis等属性支持 | |
| fr | undefined | |
| px | - | undefined |
| rpx | - | undefined |
| em | - | undefined |
| rem | undefined | |
| cap | undefined | |
| ch | undefined | |
| cm | undefined | |
| cqb | undefined | |
| cqh | undefined | |
| cqi | undefined | |
| cqmax | undefined | |
| cqmin | undefined | |
| cqw | undefined | |
| dvb | undefined | |
| dvh | undefined | |
| dvi | undefined | |
| dvw | undefined | |
| ex | undefined | |
| ic | undefined | |
| in | undefined | |
| lh | undefined | |
| lvb | undefined | |
| lvh | undefined | |
| lvi | undefined | |
| lvw | undefined | |
| mm | undefined | |
| pc | undefined | |
| pt | undefined | |
| q | undefined | |
| rcap | undefined | |
| rch | undefined | |
| rex | undefined | |
| ric | undefined | |
| rlh | undefined | |
| svb | undefined | |
| svh | undefined | |
| svi | undefined | |
| svw | undefined | |
| vb | undefined | |
| vh | undefined | |
| vi | undefined | |
| vmax | undefined | |
| vmin | undefined | |
| vw | undefined |
注意
长度默认值差异
- App平台长度
<length>可以不设置单位，不设置单位时当做 px 处理 - Web平台长度
<length>必须设置单位，不设置单位时当做无效值处理
App平台允许设置纯数字是为了性能考虑，在需要频繁更改长度时，使用纯数字会比"数字+px"稍微快一点。
日常开发为了更好的跨端兼容，还是推荐给长度<length>指定明确单位。
- App平台长度
单位精度差异
- px、rpx属于逻辑像素，在不同dpi的设备上，需要转换为物理像素。当产生浮点数时，由于精度保留策略的不同，在不同浏览器和手机OS，可能造成细微的误差。
尤其是浏览器对于小数点的px兼容不够好，比如0.5px很难正常显示。但app可以正常显示。
另外rpx和百分比，比px更容易产生浮点数，所以如果px能满足需求，尽量不用rpx和百分比。
- px、rpx属于逻辑像素，在不同dpi的设备上，需要转换为物理像素。当产生浮点数时，由于精度保留策略的不同，在不同浏览器和手机OS，可能造成细微的误差。
性能差异
- 性能 px > rpx > 百分比。rpx需要根据屏幕宽度换算为px，而百分比需要根据父容器的高或宽换算为px。
# 字体大小单位
| 名称 | 兼容性 | 描述 |
|---|---|---|
| px | - | undefined |
| rpx | - | undefined |
| em | app平台仅line-height属性支持 | |
| rem | undefined | |
| cap | undefined | |
| ch | undefined | |
| cm | undefined | |
| cqb | undefined | |
| cqh | undefined | |
| cqi | undefined | |
| cqmax | undefined | |
| cqmin | undefined | |
| cqw | undefined | |
| dvb | undefined | |
| dvh | undefined | |
| dvi | undefined | |
| dvw | undefined | |
| ex | undefined | |
| ic | undefined | |
| in | undefined | |
| lh | undefined | |
| lvb | undefined | |
| lvh | undefined | |
| lvi | undefined | |
| lvw | undefined | |
| mm | undefined | |
| pc | undefined | |
| pt | undefined | |
| q | undefined | |
| rcap | undefined | |
| rch | undefined | |
| rex | undefined | |
| ric | undefined | |
| rlh | undefined | |
| svb | undefined | |
| svh | undefined | |
| svi | undefined | |
| svw | undefined | |
| vb | undefined | |
| vh | undefined | |
| vi | undefined | |
| vmax | undefined | |
| vmin | undefined | |
| vw | undefined |
