vue-如何做移动端的适配-方法一

在head标签中加入的js原生代码

 

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

使用：如果你的设计稿是750宽，那就依旧是上面的750，这代表是每100px = 1rem;这样在css样式的时候就写对应的rem值就好，当然，如果你的分辨率不是750相信你也学会了怎么使用

原理：rem也是一个单位，相应的单位还有px,vh,em，rem相对特殊，布局的时候会进行计算，每次先动态的算好当前的页面的1rem相当于多少px来进行渲染