CSS rem和em区别：一文搞懂字体单位的实际用法

rem和em都是相对单位，但参照物不同

写CSS时，字体大小、间距这些属性除了用px，越来越多的人开始用rem和em。它们都属于相对单位，但计算方式不一样，用错了容易让页面布局乱套。

em是相对于当前元素的字体大小。比如父元素font-size是16px，那1em就是16px。但如果这个元素自己设置了font-size: 18px，那它的子元素里1em就变成18px了。em会继承并累加父级的影响，容易产生嵌套放大。

.parent {
  font-size: 16px;
}

.child {
  font-size: 1.2em; /* 16 * 1.2 = 19.2px */
}

.grandchild {
  font-size: 1.2em; /* 19.2 * 1.2 ≈ 23px，逐层放大 */
}

rem只认根元素，不受父子关系干扰

rem的r是“root”的意思，它不管你在第几层，只看html根元素的字体大小。默认情况下html的font-size是16px，所以1rem就是16px，无论你嵌套多少层，这个值不会变。

假设你在html上设置了font-size: 10px，那所有rem都会以10px为基准。这种一致性让它特别适合做响应式布局，配合媒体查询调整根字号，整个页面就能等比缩放。

html {
  font-size: 10px;
}

.box {
  margin: 1.5rem;    /* 15px */
  padding: 0.8rem;   /* 8px */
  font-size: 1.2rem; /* 12px */
}

实际开发中怎么选？

做组件的时候，如果希望内部尺寸跟随父级字体变化，比如按钮、标签这类需要适应上下文的元素，用em更灵活。像行高、图标大小这些与文字紧密相关的属性，em也很合适。

而页面整体布局，比如容器宽度、外边距、标题字号，推荐用rem。尤其在移动端适配中，通过JavaScript动态设置html的font-size，再用rem做单位，能实现屏幕越小字号越小的效果，用户体验更自然。

举个例子：你做个H5页面，在iPhone上看着刚好，换到安卓机发现文字挤成一团。如果当时用的是px，改起来就得一个个调；但用了rem，只要改一行根字号，全页面自动适配。

一个小技巧：重置根字号更方便计算

很多人习惯把html的font-size设成62.5%，也就是10px（16px的62.5%），这样1rem就等于10px，写样式时直接除以10换算，比如14px就是1.4rem，好算又直观。

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

.title {
  font-size: 2rem; /* 20px */
}

.text {
  font-size: 1.6rem; /* 16px */
}

不过要注意，如果用户在浏览器里手动调过默认字号，rem也会跟着变，这是它比px更友好的地方——对可访问性更友好。