长度单位

• 长度 <length> 用于表示距离尺寸的 CSS 数据类型。许多 CSS 属性会用到长度，比如 width、margin、padding。
• 长度 <percentage> 表述一个百分比值。许多 CSS 属性 可以取百分比值，用以根据父对象来确定大小。百分比值由一个<number>具体数值后跟着%符号构成。就像其他在 css 里的单位一样，在%和数值之间是不允许有空格的。
• rpx 是一个以设备750px为基准的单位，750rpx即为屏幕宽度，375rpx即为屏幕一半宽度。它比较适合适配不同宽度的手机。但rpx的性能和精度不如px，如果px可满足需求，尽量使用px。

名称	Android	iOS	web	描述
%	3.9	4.11	4.0	app平台仅width、height、padding(-)、margin(-)、top、left、right、bottom、flex-basis等属性支持
fr	x	x	4.0
px	3.9	4.11	4.0
rpx	3.9	4.11	4.0
upx	x	x	4.0
em	3.9	4.11	4.0
rem	x	x	4.0
cap	x	x	4.0
ch	x	x	4.0
cm	x	x	4.0
cqb	x	x	4.0
cqh	x	x	4.0
cqi	x	x	4.0
cqmax	x	x	4.0
cqmin	x	x	4.0
cqw	x	x	4.0
dvb	x	x	4.0
dvh	x	x	4.0
dvi	x	x	4.0
dvw	x	x	4.0
ex	x	x	4.0
ic	x	x	4.0
in	x	x	4.0
lh	x	x	4.0
lvb	x	x	4.0
lvh	x	x	4.0
lvi	x	x	4.0
lvw	x	x	4.0
mm	x	x	4.0
pc	x	x	4.0
pt	x	x	4.0
q	x	x	4.0
rcap	x	x	4.0
rch	x	x	4.0
rex	x	x	4.0
ric	x	x	4.0
rlh	x	x	4.0
svb	x	x	4.0
svh	x	x	4.0
svi	x	x	4.0
svw	x	x	4.0
vb	x	x	4.0
vh	x	x	4.0
vi	x	x	4.0
vmax	x	x	4.0
vmin	x	x	4.0
vw	x	x	4.0

注意

• 长度默认值差异

  • 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。

字体大小单位

名称	Android	iOS	web	描述
px	3.9	4.11	4.0
rpx	3.9	4.11	4.0
upx	x	x	4.0
em	3.9	4.11	4.0	app平台仅line-height属性支持
rem	x	x	4.0
cap	x	x	4.0
ch	x	x	4.0
cm	x	x	4.0
cqb	x	x	4.0
cqh	x	x	4.0
cqi	x	x	4.0
cqmax	x	x	4.0
cqmin	x	x	4.0
cqw	x	x	4.0
dvb	x	x	4.0
dvh	x	x	4.0
dvi	x	x	4.0
dvw	x	x	4.0
ex	x	x	4.0
ic	x	x	4.0
in	x	x	4.0
lh	x	x	4.0
lvb	x	x	4.0
lvh	x	x	4.0
lvi	x	x	4.0
lvw	x	x	4.0
mm	x	x	4.0
pc	x	x	4.0
pt	x	x	4.0
q	x	x	4.0
rcap	x	x	4.0
rch	x	x	4.0
rex	x	x	4.0
ric	x	x	4.0
rlh	x	x	4.0
svb	x	x	4.0
svh	x	x	4.0
svi	x	x	4.0
svw	x	x	4.0
vb	x	x	4.0
vh	x	x	4.0
vi	x	x	4.0
vmax	x	x	4.0
vmin	x	x	4.0
vw	x	x	4.0