CSS 长度单位 ​

说明 ​

Tenon 中支持的各种 CSS 长度单位。目前支持rem、hm、px、纯数值、%五种长度单位。

rem 和 hm ​

两个均为前端常用单位。任何移动设备的全屏宽均为7.5rem，也等于750hm。即rem和hm的关系为：1rem == 100hm。

px ​

移动设备屏幕物理像素点。比如某个手机屏幕分辨率是1920x1080，那么就意味着该屏幕的宽度是1080px，高度是1920px。即在这个分辨率下，7.5rem == 750hm == 1080px。

纯数值 ​

纯数值单位为客户端常用单位，是一个逻辑像素单位，根据移动设备的屏幕DPI（像素密度）计算而来，目的是为了使相同物理大小的屏幕，在不同像素密度的情况下，同一尺寸的视图，看起来是一样大的。在 Android 端对应的是dp，在 iOS 端对应的是pt。比如某个手机屏幕分辨率是1920x1080，DPI为3.0，那么全屏宽即为1080/3.0 (dp或pt)。

% ​

占据父元素的百分比。比如父元素宽度是100px，那么50%即为50px。

示例 ​

示例一 ​

• 屏幕分辨率：1920x1080
• 屏幕 DPI：3.0
• 单位关系：7.5rem == 750hm == 1080px == 1080/3.0 (dp或pt)

示例二 ​

• 屏幕分辨率：2560x1440
• 屏幕 DPI：3.5
• 单位关系：7.5rem == 750hm == 1440px == 1440/3.5 (dp或pt)