移动端适配方案

移动端适配方案

第一种：font-size+rem(最优解决方案)

             html标签的font-size设置为40px通过js计算屏幕与设计稿的占比，例子设计稿是720px

// 定义rem单位大小，放在页面加载之前 解决闪屏问题
      (function (){
        var device=document.documentElement.clientWidth;
        var scale=device/720;
        html.style.fontSize=scale*40+'px';
      })();

第二种：zoom+js控制页面缩放比

              用zoom属性控制页面缩放比

              

      var widths = $(window).width();
      var view = 640;
      $("html").css('zoom',widths/view);
      $(window).resize(function(){
      var widths = $(window).width();
      var view = 640;
      $("html").css('zoom',widths/view)
      })

第三种：media+font-size  + rem

             通过media控制不同区间的font-size，例子指给了一个区间

@media only screen and (min-width: 640px){
    html{
        font-size: 62.5%;
    }