`em` 和 `rem` 有什么区别？

2018-12-31

回答

em 和 rem 都是基于 font-size 的 CSS 属性。唯一的区别是他们继承的对象不同。

• em 继承父元素中的 font-size
• rem 继承根元素（html）中的 font-size

在大多数浏览器中，根元素的 font-size 默认值为 16px

加分回答

• 其他单位
• vh 和 vw：窗口高度或宽度的 1/100。可脱离父元素的继承规则，如：窗口高 900px，父元素高 1200px，1vh 为 9px。
• vmin 和 vmax：窗口高、宽取其最大或最小的 1/100。主要用于手机屏幕旋转，如：窗口高 900px，宽 600px，1vmin 为 6px，1vmax 为 9px
• ex 和 ch：分别为小写 x 的高度和数字 0 的宽度。主要用于精细排版中。
• mm 毫米、cm 厘米、in 英寸、pt 点（1/72 英寸）、pc 十二点活字（12 pt）。这些绝对单位之间的关系为：1in = 2.54cm = 25.4mm = 72pt = 6pc
• px：这是一个有魔法的单位，他与当前字体、实际的厘米或英寸无关。他被定义为小但仍可见，在水平方向 1px 的线条可以被清晰地显示出来。无论屏幕的输出是 96 dpi 或 1800 dpi，整数 px 的长度永远都看起来很好，并且在所有设备上看起来都差不多。
• % 百分比
  
• 其中 rem、em 、vh、vx、vmin、vmax、% 通常用于自适应方案中
• 移动端可采用 viewport 进行响应式设计

返回总目录

每天 30 秒