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

• px（Pixel）：绝对长度单位，绝对像素值，它取决于显示器的分辨率。一旦分辨率确定，设置为 px 的尺寸就成为固定尺寸，不会自动缩放。（1px = 1/96 英寸）
• em：相对长度单位，相对于父元素的 font-size。如父元素未设置 font-size，则相对于浏览器的默认字体尺寸（1em = 16px，注意：浏览器的默认字体大小可以更改）。通常的做法是将默认的正文字体大小设置为 62.5％（等于 10px）。
• rem（root em）：CSS3 新增的一个相对单位。相对于根元素的 font-size，其元素的大小都与根元素换算（默认浏览器的大小 16px）。
• %：相对于父元素。例如：font-size: 100% 和 font-size: 1em 一样，它们都表示字体大小是默认（继承自父元素）字体大小的 2 倍；line-height: 200% 表示行高是自己字体大小的 2 倍。
• 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。通常，我们会将浏览器的默认字体设置为 62.5%，此时 1rem = 16px * 62.5% = 10px（所以 12px = 1.2rem）；（1:10 的比例更好换算）
• % 与 em 一样，都是级联的，意思是父元素的的字体大小会影响到子元素。
• em 和 rem 单位可用于创建完美的可扩展布局，兼容多设备的不二之选！
• 相对长度：em、rem、vw、vh、vmin、vmax、%、ch。其相对于另一个长度属性，在不同设备之间缩放表现得更好。
• 绝对长度：px、cm、mm、pt、pc、in。其尺寸都是固定的，不同设备的尺寸不同，变化跨度大，所以不建议在屏幕上使用绝对长度单位。但是，如果已知输出介质，则可以使用它们，例如用于打印布局（print layout）。
• 《CSS 权威指南》指出：px 是相对长度单位，而《The Lengths of CSS》指出：px 是绝对长度单位。权威文档 MDN 上将 px 定义为了绝对单位。（本文将其归为绝对单位）
• 视口（Viewport）：在桌面端，视口指的是浏览器内部的可视区域大小，即 window.innerWidth/window.innerHeight 大小，不包含任务栏、标题栏以及底部工具栏的浏览器区域大小；而在移动端较为复杂，它涉及到三个视口：分别是 Layout Viewport（布局视口）、Visual Viewport（视觉视口）、Ideal Viewport（理想视口）。 而视口单位中的视口，在桌面端，毫无疑问指的就是浏览器的可视区域；但是在移动端，它指的则是三个 Viewport 中的 Layout Viewport。

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

vw，vh，vmin，vmax

扩展：如果您开发过微信小程序，你可能还使用 rpx，它是微信小程序独有的、解决屏幕自适应的尺寸单位。