因为少乘了10，被老板留下加班2个小时

前端时间一个朋友向我抱怨，自己因为少乘了10，结果被老板留下花了两个小时时间改BUG。从他的表情当中，我看出了慢慢的无奈与悲伤~~~

事情是这样，老板下发一个小项目，一个H5的小网站。然后朋友就开心的花了4个小时完成了网站，仔细检查之后提交，部署。然后向老板汇报！

“老板，您交代的活干完了，是否我可以下班了？”

“稍等，我看看页面效果呢！”

这一看不得了，这是什么辣鸡页面，完全都是乱的。都超出了屏幕的范围。

“这样吧，小丁啊，你留下加会儿班，把这个解决一下！”

就这样，朋友开始了苦逼的排查时间。毕竟自己的一手写出来的代码，哪儿哪儿都门儿清，而且部署之前都检查的清清楚楚，咋会出现这个问题呢？然后，抠脑袋就开始了~~~

从头到脚，哪儿哪儿都看了一遍，写了一遍，依然本地开发没有任何问题，一到手机浏览就会出错。考虑了兼容性，等等。。。依然，找不到错误的原因。直到~~~打印了一下根元素（也就是html）的字体大小<4.8px> 。嗯，没有问题，根元素字体4.8px，rem计算出来没有问题。

~~~不对，好像哪儿看着不对。然后，这位朋友就发现了4.8px好像小了点。。。有过前端开发经验的童鞋应该都知道，浏览器对于字体有一个最小字体大小。chorme 之类的是12px，也就是说，这根元素的4.8px 根本就是无效属性。rem的参考大小依然是浏览器默认字体大小。wtfk，找个这个东西花了两个小时！！！太苦了，然后，修改，提交，部署，汇报，嗯。。。这次一次通过了。

可能有些没有开发经验的同学不是很了解以上的内容啊，简单介绍一下。

关于H5页面响应式布局（可以随着屏幕的宽度自适应页面的比例）开发有很多开发方式，媒体查询、vw/vh、百分比、栅格布局，rem，等等，以上朋友使用的就是rem，rem是指相对于根元素字体大小比例的一个计算数据。比如，根元素节点字体大小为12px，那么，1rem就等同于12px，2rem 就是 24px。

因此在开发过程中，我们可以通过控制根元素节点大小加上使用rem的方式去开发网站，这样，网站在不同机型下呈现出来的效果会是一模一样的。

具体的原理：

设计图宽度750px，我们可以计算出，当前屏幕宽度，相对于设计图所占的一个比例，即把当前屏幕分为750份，那么设计图中10px就是当前屏幕占750份中的10份。但是不同机型可能宽度不一样，所以，这个当前屏幕宽度得是一个由程序获取的一个动态的值。然后这个值除以750*10就是这个10项数在当前屏幕中所占的份数。说到这里，大家可能就想到了，上面有提到过，rem就是相对于根元素的计算比例大小，那么如果我们把当前屏幕宽 / 750这个设置为根元素节点的字体大小，然后页面所有元素都用rem控制，那不是为所欲为了么！！！嗯，对，事实就是这样。我这个朋友也是这样，然后。。。就花了2个小时去找原因。

因为最小字体的原因，浏览器参照的根元素字体并不是动态设置的字体大小，比设置值更大的浏览器最小字体。这也就导致了，朋友页面中主体部分超出屏幕。

说到这里，就已经结束啦！！！如果有什么不懂得可以留言咨询我哦~~~