尺寸单位

数字

数字用于定义 opacity（透明度）、line-height（行高），数字的意义取决于上下文。

p 标签的字体大小为 24px，那么行高将计算为 36px。

p {
  font-size: 24px;
  line-height: 1.5;
}

百分比

因为宽度是按照父元素可用宽度的百分比计算的，所以 p 标签的宽度为 150px。

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%; 
}

如果将 margin 或 padding 设置为百分比，它们将是父元素宽度的一部分，与方向无关。

div {
  width: 300px;
  height: 100px;
}

div p {d */
  padding-left: 50%; /* calculated: 150px */
}

绝对长度

单位	全称	相当于
cm	Centimeters（厘米）	1cm = 96px/2.54
mm	Millimeters（毫米）	1mm = 1/10th of 1cm
Q	Quarter-millimeters（1/4毫米）	1Q = 1/40th of 1cm
in	Inches（英寸）	1in = 2.54cm = 96px
pc	Picas	1pc = 1/6th of 1in
pt	Points	1pt = 1/72th of 1in
px	Pixels（像素）	1px = 1/96th of 1in

相对长度

相对长度是根据基准值计算出来的，与百分比很相似。相对长度与百分比的区别在于，可以根据上下文确定元素的大小。

单位	相当于
em	相对于父级的字体大小，即 1.5em 比其父级的字体大 50%（因父级的 font-size 变化而变化）
rem	相对于根元素的字体大小（默认为 16px）,即 1.5rem 比根元素的字体大 50%（因根的 font-size 变化而变化）
<!--	ch

视口相关单位

单位	相当于
vw	1vw 等于视口宽度的 1%
vh	1vh 等于视口高度的 1%
vi	1vi 等于根元素内联轴上视口尺寸的 1%
vb	1vb 等于根元素块轴上视口尺寸的 1%
vmin	1vmin 等于视口较小尺寸的 1%
vmax	1vmin 等于视口较尺寸的 1%

常见问题

解决1 px 在某些手机上看起来像2 px 的兼容问题。

答：使用 JavaScript 检测设备的 DPR，然后动态调整1像素元素的样式。