说说 em、px、rem、vh、vw 区别？

1. 适配性有什么区别？

  • px、em 兼容性最好，可适配所有浏览器。
  • rem、vh、vw 可以适应多种不同分辨率的终端，包括移动设备。

2. px、em、rem、vh、vw

  • px：像素，屏幕上的物理像素点，是绝对单位。任意浏览器的默认字体高为 16px。

  • em：相对长度单位，相对于 当前对象内文本的字体尺寸，会继承父级元素的字体大小。

  • rem：相对单位，只相对于 HTML 根元素 font-size 的值。如果想简化 px-rem 的转化：

    html {
    font-size: 62.5%;  /* 1rem = 10px */
}

  • vw / vh：相对视口单位。

    • vw：视口宽度分成 100 份，50vw 表示一半宽。区别于 %——% 相对的是父级元素，而 vw、vh 始终针对视口。
    • vh：视口的高度。
    • 视口：在桌面端指的是浏览器的可视范围，在移动端就是布局视口。

3. 绝对单位有什么？相对长度单位有什么？

  • 绝对单位：px、pt、pc、mm、cm、in 等。
  • 相对单位：em、rem、ex、ch、%、vw、vh、vmin、vmax、lh、rlh 等。

补充：

  • 现代响应式布局通常组合使用：vw 做整体适配、rem 做局部尺寸、px 做边框等细节。
  • 移动端 1px 问题推荐配合 viewport meta + rem + vw 综合方案（详见 css-005、css-064）。