# 长度单位

长度 <length> 用于表示距离尺寸的 CSS 数据类型。许多 CSS 属性会用到长度，比如 width、margin、padding。
长度 <percentage> 表述一个百分比值。许多 CSS 属性可以取百分比值，用以根据父对象来确定大小。百分比值由一个<number>具体数值后跟着%符号构成。就像其他在 css 里的单位一样，在%和数值之间是不允许有空格的。

名称

兼容性

描述

rpx

rem

cap

cqb

cqh

cqi

cqmax

cqmin

cqw

dvb

dvh

dvi

dvw

lvb

lvh

lvi

lvw

rcap

rch

rex

ric

rlh

svb

svh

svi

svw

vmax

vmin

app平台仅width、height、padding(-)、margin(-)、top、left、right、bottom、flex-basis等属性支持

# rpx

rpx 是一个以设备750px为基准的单位，750rpx即为屏幕宽度，相当于100%；375rpx即为屏幕一半宽度，相当于50%。

因为很多设计稿是以750px为基准出图的，所以使用rpx可以比较好的在不同屏幕宽度下还原设计稿。

rpx的性能和精度不如px，但优于百分比。如果px可满足需求，尽量使用px。

字体大小，即font-size，不应该使用rpx，详见

height、padding、margin，默认不使用rpx。除非你的需求真的要根据屏幕宽度动态调整这些值。一般没有这种需求。

所以rpx比较适合的场景是view的宽度width设置。

长度默认值差异
- App平台长度 <length> 可以不设置单位，不设置单位时当做 px 处理
- Web平台长度 <length> 必须设置单位，不设置单位时当做无效值处理
  App平台允许设置纯数字是为了性能考虑，在需要频繁更改长度时，使用纯数字会比"数字+px"稍微快一点。
  日常开发为了更好的跨端兼容，还是推荐给长度 <length> 指定明确单位。
单位精度差异
- px、rpx属于逻辑像素，在不同dpi的设备上，需要转换为物理像素。当产生浮点数时，由于精度保留策略的不同，在不同浏览器和手机OS，可能造成细微的误差。
  尤其是浏览器对于小数点的px兼容不够好，比如0.5px很难正常显示。但app可以正常显示。
  另外rpx和百分比，比px更容易产生浮点数，所以如果px能满足需求，尽量不用rpx和百分比。
性能差异
- 性能 px > rpx > 百分比。rpx需要根据屏幕宽度换算为px，而百分比需要根据父容器的高或宽换算为px，计算复杂度高于rpx。