em与rem_牛客博客

`em`

子元素字体大小的em是相对于父元素字体大小
width/height/padding/margin元素是相对于当前元素字体的大小。

<div>
    我是父元素div
    <p>
        我是子元素p
        <span>我是孙元素span</span>
    </p>
</div>

div {
  font-size: 40px;
  width: 10em; /* 400px */
  height: 10em;
  border: solid 1px black;
}
p {
  font-size: 0.5em; /* 20px */ 
  width: 10em; /* 200px */
  height: 10em;
  border: solid 1px red;
}
span {
  font-size: 0.5em;  /* 10px */ 
  width: 10em;    /* 100px */ 
  height: 10em;
  border: solid 1px blue;
  display: block;
}

rem

rem表示 root em,它是相对于根元素的长度单位。根元素指<html>中定义的字体大小。这意味着任何地方的1rem总是等于<html>中定义的字体大小。通常给html元素设置一个大小。

html {
    font-size: 10px;
    }
div {
    font-size: 4rem; /* 40px */
    width: 30rem;  /* 300px */
}

例：在不同的屏幕宽度下设置不同的根元素大小，可以收集主流的屏幕大小，但始终不能所有设备适配。

@media only screen and (min-width:320px) {html {font-size:12px;}}
@media only screen and (min-width:375px) {html {font-size:13px;}}
@media only screen and (min-width:412px) {html {font-size:14px;}}

还可以根据js计算当期屏幕分配率然后动态分配font-size的值，这样可以实现全适配

em与rem

在项目开发中究竟是选用 rem 还是 em 一直以来争议不断。一些开发人员不使用rem，因为rem使组件不那么模块化。而另一些开发人员喜欢rem的简单性，使用rem处理所有元素。

其实 em和rem都有各自的优势和劣势，在实际项目开发中，应该结合使用两者，利用各自的优势，从而实现较好代码质量和显示效果。

那么在具体的应用中如何在两者中做选择呢？有两条简单的指导原则：

如果属性尺寸要根据元素字体进行缩放，则使用em
其它情况下都使用rem
两者根据实际情况结合使用

参考文章： https://www.cnblogs.com/ifat3/p/8890812.html

http://caibaojian.com/web-app-rem.html