web前端开发中em与rem

以前写页面的时候所用的单位都是PX，后来发现PX这个单位已经不能满足需求了。比如要做响应式或者移动端的页面时，PX用起来显得特别尴尬。后来学习了响应式布局和移动端后，接触到了em和rem这两个单位。起初还是很不理解这两个单位，它们看着很像，导致有一段时间都是胡乱使用这两个单位。因此，下决心整明白它们。

em和rem的区别

它们都是相对单位，不同的是“r”的区别，这里的r是不是单词root的简写呢，根、根源的意思。在html中，可以理解成根节点、根元素。正因为这个r，它们的用法也是不一样的。rem是相对于根节点（html）的字体大小计量单位，而em是相对于父级字体大小的计量单位。它们都具有继承性。

实践认证

说得再多，不如亲自写代码尝试，毕竟实践出来的才是硬道理。 先来试试em，这里结构和样式就不做分离的处理了，如图：

代码很简单，一个div包裹这另一个div。父级div长宽都为66px，添加了背景颜色，字体大小设置的是24px。然后子级div，长宽使用的单位都是1em，按照规则，这里的1em应该是等于父级的字体大小，也就是1em等于24px。也就是一个长宽我66px的div包裹着一个长宽为24px的div。

如果给子级的div也设置字体大小，我把它设置成12px，结果会是怎样的呢！果真，实践才是硬道理。如果给子级设置了字体大小，那么em是根据自身的字体大小来确定的。也就是说此时的1em=12px。所以，结论需要重新整理一下。em是相对于父级字体大小，但是如果子级同时设置了字体大小，那么em就是相对于自身字体大小来决定的。

再来试试rem，rem是相对于根节点（html）的字体大小计量单位。所以，咱们先给html设置好字体大小，在body中有两个div，并分别设置了不同的长宽。代码如下：

box1设置的长宽为1rem，box2设置的长宽为2rem。1rem=24px,因此box1的长宽为24px，box2的长宽为48px。上一个例子中设置的字体故意没有去除，可以看到并没有什么影响。

也就是说，根节点（html）的字体大小等于1rem。如果html字体大小是根据视口的宽度的变化而变化，那么这个值是不是就可以动态的变化呢！我们都知道移动端受设备的影响，不同设备的宽度都是不一样的，这个时候用rem做移动端的页面应该是一个不错的选择。淘宝移动端就是这么做的，可以看到淘宝移动端首先给body字体大小设置为36px，里边的代码我就随便查看了一下，截取了其中一部分，随处都可以看到“rem”的字样。

那么现在的问题就是，怎么给页面根节点设置字体大小呢？这个……好像很简单，font-size:*-+@#￥;可是，现在的需求是，我要字体大小是变化的，不要一个永久的定值。这个值是根据视口的变化而变化的，只有这样才能做到页面在不同视口上展示良好。这个需求让我想到了媒体查询，@media only screen and (屏幕宽度) {html{字体大小}，可是这样的做法得写好几种情况，而且还得对屏幕的大小很了解，如果新的主流的屏幕尺寸出现，还得往上面重新添加。现在假设一种情况，我不知道任何屏幕尺寸，媒体查询的条件我无法设置，这个时候该怎么办！？用js能不能获取视口宽度，然后进行设置字体大小呢！在js中关键代码如下：

关于getBoundingClientRect()的介绍，看看MDN是怎么说的吧！我是链接。