移动适配方法（开发类）

总结的移动适配方法，希望可以共同学习。

一、根据html根节点方案（rem单位）

updataHtml();
function updataHtml(){
     var w = document.documentElement.clientWidth;
           document.documentElement.style.fontSize=w/16+'px';
}

window.onresize=function(){
    updataHtml();
}

html{font-size: 20px;}

二、手机淘宝的flexible方案（计算太繁琐）

手机淘宝的flexible方案是综合运用rem和px两种单位+js设置scale和html字体

只需要在Web页面的中添加对应的flexible_css.js,flexible.js文件：

例如：
设计师提供的UI宽度比如是640，写css的时候，比如一个div，设计的尺寸是：宽度：200，高度：100，那你就写width:200/640rem;height:100/640rem。
width:200/640rem;不要直接这样写，你要算出200/640的结果。

三、手机腾讯（根据设计稿同比缩放，在加上阀值控制）

我们认为初始化的rem是100，对应的fontsize也是100，基准的屏幕宽度按照320的设计稿，根据当前屏幕的宽高像素比，算出来当前的rem，100比较好算，设置成其他的也无妨，因为你算的是相对比例。

(function() {
     var baseFontSize = 100;
      var baseWidth = 320;
      var clientWidth = document.documentElement.clientWidth || window.innerWidth;
      var innerWidth = Math.max(Math.min(clientWidth, 480), 320);
      var rem = 100;
      if (innerWidth > 362 && innerWidth <= 375) {
            rem = Math.floor(innerWidth / baseWidth * baseFontSize * 0.9);
      }
      if (innerWidth > 375) {
           rem = Math.floor(innerWidth / baseWidth * baseFontSize * 0.84);
      }
     document.querySelector('html').style.fontSize = rem + 'px';
}());

具体详细：
1、css设置了font-size:100px；
2、引入刚才那个js。
3、比如一个按钮设计稿件是30pxX30px 它是除以100的。最后咱们设置是0.3remX0.3rem。

它在js里面设置了三个区间：
1）  var innerWidth = Math.max(Math.min(clientWidth, 480), 320);
2）innerWidth > 362 && innerWidth <= 375
3）innerWidth > 375