var  docEl = doc.documentElement,

     resizeEvt =  'orientationchange'  in  window ?  'orientationchange'  :  'resize' ,

     recalc =  function  () {

       var  clientWidth = docEl.clientWidth;

       if  (!clientWidth)  return ;

       docEl.style.fontSize = 20 * (clientWidth / 320) +  'px' ;

     };

   if  (!doc.addEventListener)  return ;

   win.addEventListener(resizeEvt, recalc,  false );

   doc.addEventListener( 'DOMContentLoaded' , recalc,  false );

})(document, window);

针对于rem，其实他和em是一样的，只不过他是针对于根元素来计算的。

有的时候，我们想着方便，会把html的font-size设置成62.5%，这样就是10px的大小，其实这样反而是弄巧成拙了，怎么说呢》要知道，人家chrome的最小字体大小是12px，一旦小于这个限制，人家就按12px计算了，你还嘚瑟啥啊？后面跟个智障一样一通算，最后全部错了，就问你尴不尴尬？尴尬死了！

而且要记住，即便是你用了rem，也要考虑到人家的兼容性啊，最好在每一个rem前面都写一些px的，这样起码可以保证优雅降级啊！

所以我的最终方案就是：当我想要写一个自适应的页面时，不让字体去自适应屏幕，而是让外面的自适应字体，比如我们把元素设置为宽度为50em，不管字体设置为多大，都只能容纳50个字。这仅限于同一级别，千万别父元素设置宽，子元素再设置字体大小，那样是不对的！

·················································································没错！我是华丽的分割线！·············································································

最后说一下vw和vh！其实这两个笔者觉得是相当好用的，起码他是适用于屏幕大小的，对于手机端来讲，这无疑是雪中送炭，笔者心中的朱砂痣啊！但是它的兼容性还是有毛病的，并不针对于所有浏览器！无奈摊手，还是不行啊！因为我们平常开发，还是要考虑一下普通人的感受的啊！

不过用法还是要记载一下的，万一那一天，人家翻身农奴把歌唱了呢！

vw和vh都是百分比的用法，假如你的屏幕宽度是100mm，那10vw就是10mm，也就是10%的宽度，是不是很简单的用法！

唉···  如果这个兼容性调好了该有多好！也不用这么愁了···  怪自己能力不够啊！

而且我发现一件非常神奇的事情，这个事情只发生在安卓手机上，奏四！人家的高100%都是针对于整个手机的100%。但是假如你在做一个登录注册页面吧，那里不是有input框吗？一点点击文本框，背景图的100%就会默认为除了键盘之外的100%，这一点很鸡肋！以至于我做的时候直接把html{background：#自己的颜色；height：100vh；}了！

············································································ 没错！我是华丽的分割线！················································································

所以笔者最后得出结论，当我们需要手机字体大小自适应的时候，最好的办法就是：用 媒体查询啊！下面是合适的分布，可以借鉴哦~

@media only screen and (max-width:300px) {
}
@media only screen and (max-width:310px) and (min-width:300px) {
}
@media only screen and (max-width:320px) and (min-width:310px) {
}
@media only screen and (max-width:350px) and (min-width:320px) {
}
@media only screen and (max-width:360px) and (min-width:350px) {
}
@media only screen and (max-width:400px) and (min-width:360px) {
}
@media only screen and (max-width:470px) and (min-width:400px) {
}
@media only screen and (max-width:480px) and (min-width:470px) {
}
@media only screen and (max-width:540px) and (min-width:480px) {
}
@media only screen and (max-width:560px) and (min-width:540px) {
}
@media only screen and (max-width:570px) and (min-width:560px) {
}
@media only screen and (max-width:630px) and (min-width:570px) {
}
@media only screen and (max-width:640px) and (min-width:630px) {
}
@media only screen and (max-width:710px) and (min-width:640px) {
}
@media only screen and (max-width:720px) and (min-width:710px) {
}
@media only screen and (min-width:720px) {
}