移动端适配方案

介绍两种移动端适配方案

1. rem为主

• 设置根节点字体大小，页面元素都使用scss表达式将px转换为rem
  

  // 在scss中
  
  $mainSize:20px;
  html{font-size:$mainSize;}
  @function f($px){
    @return $px/$mainSize/2*1rem;
  }

• 在页面进行缩放时更新根节点字体大小（设计稿640）
  

  $(window).ready(function(){
      $('html').css({'font-size': $(window).width() / 320 *20});
  });
  $(window).resize(function(){
      $('html').css({'font-size': $(window).width() / 320 *20});
  });

   

2. 通过js计算缩放比例控制适配（transform: scale(scale);），页面上最外层元素加上类名adapt

var adapt= {
    styleRule: {
        add: function(a, b) {
            var c = document.styleSheets[document.styleSheets.length - 1];
            c.cssRules ? c.insertRule(a + "{" + b + "}", c.cssRules.length) : c.addRule(a, b)
        },
        remove: function(a) {
            for (var b = 0; b < document.styleSheets.length; b++) {
                var c = document.styleSheets[b];
                c.cssRules ? function() {
                    for (var b = 0; b < c.cssRules.length; b++) c.cssRules[b].selectorText == a && c.deleteRule(b)
                }() : c.removeRule(a)
            }
        }
    },
    reset: function() {
        adapt.styleRule.remove(".adapt")
    },
    render: function(a) {
        function b() {
            adapt.scale = e / 320;
            adapt.styleRule.add(c, d.replace("{scale}", adapt.scale));
        }
        var c, d = "-webkit-transform:scale({scale});-webkit-transform-origin:0px 0px 0px;margin:0px;width:320px;";
        document.querySelectorAll(".adapt")[0] ? (c = ".adapt", d += "overflow:hidden;") : (console.warn(".adapt is undefined, open the default settings"), c = "body");
        var e = window.innerWidth;
        document.body.clientWidth <= window.innerWidth && (e = document.body.clientWidth),
        a ? setTimeout(function() {
            b()
        }, 110) : b();
    },
    init: function() {
        var a = "onorientationchange" in window ? "orientationchange": "resize";
        window.addEventListener(a, function() {
            adapt.render()
        });
    }
};
adapt.init();
adapt.render();

 3. 自执行方法

(function(win,doc){
    change();
    function change(){
        doc.documentElement.style.fontSize = doc.documentElement.clientWidth *20/375+'px';
    }
    win.addEventListener('resize',change,false);
    win.addEventListener('orientationchange',change,false); 
})(window,document);