我的前端学习笔记 关于em和rem的使用

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">因为在公司以后都是移动端前端开发，传统的用px作为单位显然不切实际。因此我们要使用相对单位em和rem。</span>

这两个其实没什么本质区别，只是相对的不一样。em 是以父元素的字体大小为参照。比如父元素是12px，你给子元素1em,他其实就是12px长。

下面举例说明：这是html的结构

     <div id="fa">        <div id="a">a<span style="white-space:pre"></span><div id="a2">a2</div>        </div><span style="white-space:pre"></span><div id="b">b</div><span style="white-space:pre"></span><span style="white-space:pre"></span></div><span style="white-space:pre"></span><div id="c">c</div>

赋给他们不同的em值，他们实际的值如注释所示

#fa{font-size: 20px;}#a{font-size: 1em;}      /*20px*/#a2{font-size: 0.8em;}   /*16px*/#b{font-size: 0.8em;}    /*16px*/#c{font-size: 0.8em;}      /*12*0.8*/

当我们写页面的时候比如父元素是20px，设计稿要画一个200px*200px的框，那么就是把width:10em;height:10em就可以。值得注意的是如果你设置了那个框的字体。那么width和height都会随字体大小改变。这也是初学容易遇到的问题。比如我设置font-size为2em那么其实就是40px;则width和height都要设置成5em才会还原设计稿的内容。

这样计算显然很麻烦，所以有了rem这个单位。

rem始终根据浏览器根节点字体来选取值，比如你设置浏览器字体为12px以后，你之后所有计算都是px除以12就可以，非常方便，不用担心因为设置字体导致div变形。

另外很多人喜欢把根节点设置成10px这样计算特别方便，但是要注意其实这样做未必可取，因为chrome最小字体是12px所以在chrome并不齐作用，你的1em 还是相当于12px而不是10px。

用rem作为单位显然很有优势，是移动端开发适配的小帮手。