PX, EM, REM, %, VW, 和VH的区别

• 绝对单位

  1. px是绝对单位，虽然它与dpi和设备分辨率相关，但是基于设备自身来说，px单位是固定的且不会随着其他元素改变，在自适应端使用px会有一些麻烦，但是对于一些需要保持一致尺寸的元素来说是有用的，如果你的元素不需要resized，px 是一种很好的选择

• 相对单位

  1. EM: 相对于父元素

  2. REM: 相对于根元素 (HTML tag)

  3. %: 相对于父元素

  4. VW: 相对于视口的宽度

  5. VH: 相对于视口的高度

• 与px不同的是，%, EM, REM 更适合用在自适应的情况. 相对单位在不同的设备上可以更好的缩放，因为他们可以根据其他元素的尺寸缩放。

• 由于em是相对父级元素，因此对于嵌套的元素，有时候最终的尺寸会意想不到

• PX, EM, and REM 主用用于字体尺寸，而 %, VW, and VH 大多数情况用在margins, padding, spacing, and widths/heights上

• 列宽只有在使用百分比单位的时候才能表现出比较好的自适应效果
  -Margins: 一个块的margin使用%往往是更好的选择，因为当缩放到手机设备上的时候，%可以确保margin不会比内容更大，它会相对内容的尺寸变化。padding同理