理解em,rem
Posted tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了理解em,rem相关的知识，希望对你有一定的参考价值。
在平常做网站写代码的时候一般都是使用px，在之前的学习时就略微的学习了一些关于em、rem的知识，但是由于一直没有用到过，所以几乎全部忘记了。今天在研究一些知识的时候用到了em，所以特意将学到的知识总结一下。
1.em
em是相对长度单位，相对于当先对象中的字体尺寸。比如在某个div中font-size设置为20px，那么，1em就相当于20px，0.25em就相当于5px。由于浏览器的默认字体大小为16px，所以为了简化font-size的换算，就要在body的选择器中将font-size设置为62.5%，换算成像素，就是16*62.5%=10px，这样在之后的设置尺寸大小的时候就可以用1.2em代表12px，也就是说此时的换算关系就是1em=10px。
值得注意的是em会集成父级元素的字体大小。所以不要轻易的在当前元素中改变em。
2.rem
rem和em有相似的使用方法，都是相对长度单位。不同的是rem需要在根元素html的css选择器中设置font-size,设置font-size为14px，则1rem就是14px。使用这个长度单位的好处是可以用于做适配。可以直接在<hmtl>中更改font-size就可以在不同的移动端显示不同大小的元素。我们都知道浏览器默认的字体大小都是16px,因此在一些书中会这样写到：将html的font-size设置成62.5%，这样就是10px,那么接下来的0.1rem就是1px了，这样好算。但是，在实际中我发现在谷歌浏览器中这个方法是不可行的。
因为在谷歌浏览器中的默认字体大小虽然是16px，但是在html中却不可以将字体设置小于12px，如果小于12px就会默认以12px来计算。这样的话我们的62.5%为10px就破灭了。所以在我看来可能最好的方法就是设置成为20px了，也就是在html中设置字体为125%或是直接20px。
以上是关于理解em,rem的主要内容，如果未能解决你的问题，请参考以下文章