vue使用rem来实现移动端自适应布局

现在手机屏幕分辨率越来越多，为了适应屏幕不同大小，我们首先要做到的便是页面布局自适应。

当然解决方案很多，比如：百分比布局，弹性布局flex，也都能获得不错的效果，这里主要介绍的是本人在实践中用的最高效的布局方案——rem布局

一，设置初始的rem值

用js计算来实现rem，只需要全局引入下面这段原生js代码即可

 <script>   
      (function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if(clientWidth>=640){
                    docEl.style.fontSize = '24px';
                }else{
                    docEl.style.fontSize = 24 * (clientWidth / 640) + 'px';
                }
            };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
      </script> 

如果你是用vue创建的项目，可直接在总的index.html中直接添加，它是一个全局的html页面。也可在main.js引入

二， 全局使用"rem"来代替"px"

由于rem是相对于根节点元素大小的单位，故当设备宽度改变时，采用rem布局的大小均会跟随相同比例变化，从而实现整体缩放。

注意：为更好的实现自适应布局，全局最好少出现（或不出现）用"px"的情况，全部使用"rem"。