CSS 单位及其需要注意的地方

• 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 的宽度，也就是 1ch = 0（一个 0 的宽度），3ch = 000（三个 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 是级联的，意思是父元素的的字体大小会影响到子元素。

• em 和 rem 单元可用于创建完美的可扩展布局，兼容多设备的不二之选！

• 相对长度：em、rem、vw、vh、vmin、vmax、%、ch。其相对于另一个长度属性，在不同设备之间缩放表现得更好。

• 绝对长度：cm、mm、pt、pc、in。其尺寸都是固定的，不同设备的尺寸不同，变化跨度大，所以不建议在屏幕上使用绝对长度单位。但是，如果已知输出介质，则可以使用它们，例如用于打印布局（print layout）。

• 《CSS 权威指南》指出：px 是相对长度单位，而《The Lengths of CSS》指出：px 是绝对长度单位。权威文档 MDN 上将 px 定义为了绝对单位。

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

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

vw，vh，vmin，vmax

• 绝对单位当做了解即可。