• px（Pixel）：相对长度单位，绝对像素值，它取决于显示器的分辨率。一旦分辨率确定，设置为 px 的尺寸就成为固定尺寸，不会自动缩放。（1px = 1/96英寸）

  • em：相对长度单位，相对于父元素的 font-size。如父元素未设置 font-size，则相对于浏览器的默认字体尺寸（1em = 16px，注意：浏览器的默认字体大小可以更改）。通常的做法是将默认的正文字体大小设置为 62.5％（等于 10px）。

  • rem（root em）：CSS3 新增的一个相对单位。相对于根元素的 font-size，其元素的大小都与根元素换算。如果未设置，也是浏览器的默认大小 16px

  • %：相对于父元素

  • vw：相对于视口的宽度，1vw = 1% * viewport width（视口宽度）

  • vh：相对于视口的高度，1vh = 1% * viewport height（视口高度）

  • vmin：相对于视口的较小尺寸（vw 和 vh 中的最小值），1vmin = min（1vh，1vw）

  • vmax：相对于视口的较大尺寸（vw 和 vh 中的最大值），1vmax = max（1vh，1vw）

  • ch：相对于元素字体的字形 0 的宽度

  • in（英寸）：1in = 2.54cm=96px

  • pc（Picas，皮卡）：1pc = 1in / 6 = 16px，也就是大约 6pt，1/6 英寸，也就是 1pc = 12pt = 1/6in。

  • pt（Point，点）：1pt = 1in / 72 = 1.333px（大约），它是物理长度单位，相当于 1/72 英寸。通常在印刷中使用。（1pt = 1/72in）

  • cm（厘米）： 1cm = 96px / 2.54 = 37.8px（大约）

  • mm（毫米）：1mm = 1cm / 10 = 3.78px（大约）

注意点

  • px 和 em 都是长度单位，区别是 px 的值是固定的，计算比较容易。em 得值不是固定的，并且 em 会继承父级元素的字体大小。
  • 浏览器的默认字体大小都是 16px。所以未经调整的浏览器都符合: 1em = 16px。那么 12px = 0.75em，10px = 0.625em。
  • %、em 是级联的，意思是父元素的的字体大小会影响到子元素。

理解视口：在桌面端，视口指的是浏览器的可视区域；而在移动端较为复杂，它涉及到三个视口：分别是 Layout Viewport（布局视口）、Visual Viewport（视觉视口）、Ideal Viewport。 而视口单位中的视口，在桌面端，毫无疑问指的就是浏览器的可视区域；但是在移动端，它指的则是三个 Viewport 中的 Layout Viewport。

CSS 中的四个视口单位分部是 vw，vh，vmin，vmax。以下是它们的兼容情况：

vw，vh，vmin，vmax
  • 其他一些单位当做了解即可。