移动端开发中vw和rem组合适配

什么是rem?
我们做的单位em表示元素的字体大小跟随父元素大小相关联，比如父元素字体大小为10px，那么1em就是10px，2em则是20px; 而rem其实就是元素依据根元素的字体大小进行设置,这样的话如果我们网页中的元素使用rem作为大小的单位，就能实现等比缩放，也叫rem布局；

说道移动端开发，就少不了对dpr的了解:
dpr：设备像素比，它等于物理像素（真正意义上的像素大小，比如移动设备的截图）/逻辑像素（CSS中我们要设置的像素大小）
常见的dpr有2和3（我们一般认为设计图为640或750px时所针对的设备的dpr为2，大于750px的，dpr为3）
那么这样一来呢，我们在移动端开发时，我们的逻辑像素就等于物理像素/dpr 也就是说，当dpr为2（最常见）时，如果我们想设计640px的设计图，那么我们就需要在CSS中设置宽度为640px/2=320px的逻辑像素。
另外我们要使用rem布局，就需要对px进行换算（w为方便计算我们通常设置html/body {fon-size=100px}） 那么320px就等于0.32rem ，也就是640px的物理像素，如果使用rem布局且100px大小的根元素参照，那么CSS中设置的大小就位0.32rem；

VW的引入
如果我们对rem的参照用px来定义的话，我们会发现，元素的大小依旧是很死板，是一个固定的值，无法根据屏幕的大小进行适配，那么这就需要一个可以根据窗口大小来进行改变的单位—>vw，作为rem的参考单位，vw简单来说就是元素所占当前窗口大小的比例，理论上100vw就等于100%d的窗口大小，也就是100vw=100%视口宽度。那么当屏幕宽度为640px时，我们依然用100px作为参考，换算成vw的思路：
100vw=640px而 1rem=100px 则？vw=100px呢（因为我们需要用?vw来作为rem的参考大小）答案是15.325vw 而当dpr为2时，我们所有的逻辑像素都要乘以2得到物理像素，所有我们直接用15.625的2倍31.25vw作为整体元素的参照，也就是给根元素设置font-size:31.25vw 同理得到当设计图为750px（常见）时，我们设置根元素font-size:26.67vw（四舍五入）

总结：这样一来我们就有了rem和vw进行组合的自适应布局，这样我们所有的元素参照根元素大小进行设置，而根元素的大小又会随着窗口大小进行等比变换，整体达到一个适配效果–>也就是当屏幕宽度发生变化时（比如不同设备），我们页面中所以元素的大小也进行合理的变化，达到适配的需求；

另：实际开发中，我们通常也会通过JS来调整meta标签和body的font-size ，进而方便我们对页面元素大小的点设置：

 /* eslint-disable */
 ;(function(win, lib) {
     var doc = win.document;
     var docEl = doc.documentElement;
     var metaEl = doc.querySelector('meta[name="viewport"]');
     var flexibleEl = doc.querySelector('meta[name="flexible"]');
     var dpr = 0;
     var scale = 0;
     var tid;
     var flexible = lib.flexible || (lib.flexible = {});

     if (metaEl) {
 //        console.warn('将根据已有的meta标签来设置缩放比例');
         var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
         if (match) {
             scale = parseFloat(match[1]);
             dpr = parseInt(1 / scale);
         }
     } else if (flexibleEl) {
         var content = flexibleEl.getAttribute('content');
         if (content) {
             var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
             var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
             if (initialDpr) {
                 dpr = parseFloat(initialDpr[1]);
                 scale = parseFloat((1 / dpr).toFixed(2));
             }
             if (maximumDpr) {
                 dpr = parseFloat(maximumDpr[1]);
                 scale = parseFloat((1 / dpr).toFixed(2));
             }
         }
     }

     if (!dpr && !scale) {
         var isAndroid = win.navigator.appVersion.match(/android/gi);
         var isIPhone = win.navigator.appVersion.match(/iphone/gi);
         var devicePixelRatio = win.devicePixelRatio;
         if (isIPhone) {
             // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
             if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
                 dpr = 3;
             } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
                 dpr = 2;
             } else {
                 dpr = 1;
             }
         } else {
             // 其他设备下，仍旧使用1倍的方案
             dpr = 1;
         }
         scale = 1 / dpr;
     }

     docEl.setAttribute('data-dpr', dpr);
     if (!metaEl) {
         metaEl = doc.createElement('meta');
         metaEl.setAttribute('name', 'viewport');
         metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
         if (docEl.firstElementChild) {
             docEl.firstElementChild.appendChild(metaEl);
         } else {
             var wrap = doc.createElement('div');
             wrap.appendChild(metaEl);
             doc.write(wrap.innerHTML);
         }
     }

     function refreshRem(){
         var width = docEl.getBoundingClientRect().width;
         if (width / dpr > 768) {
             width = 768 * dpr;
         }
         var rem = width / 7.5;
         docEl.style.fontSize = rem + 'px';
         flexible.rem = win.rem = rem;
     }

     win.addEventListener('resize', function() {
         clearTimeout(tid);
         tid = setTimeout(refreshRem, 300);
     }, false);
     win.addEventListener('pageshow', function(e) {
         if (e.persisted) {
             clearTimeout(tid);
             tid = setTimeout(refreshRem, 300);
         }
     }, false);

     if (doc.readyState === 'complete') {
         doc.body.style.fontSize = 12 * dpr + 'px';
     } else {
         doc.addEventListener('DOMContentLoaded', function(e) {
             doc.body.style.fontSize = 12 * dpr + 'px';
         }, false);
     }


     refreshRem();

     flexible.dpr = win.dpr = dpr;
     flexible.refreshRem = refreshRem;
     flexible.rem2px = function(d) {
         var val = parseFloat(d) * this.rem;
         if (typeof d === 'string' && d.match(/rem$/)) {
             val += 'px';
         }
         return val;
     }
     flexible.px2rem = function(d) {
         var val = parseFloat(d) / this.rem;
         if (typeof d === 'string' && d.match(/px$/)) {
             val += 'rem';
         }
         return val;
     }

 })(window, window['lib'] || (window['lib'] = {}));

可以看到这是对设计图为750px作为针对对象，且导入JS后会自动在head中添加meta标签，且给html设置大小（非vw单位）：

比例设为0.5可以直接省去我们除以dpr的步骤，也就是所量取元素大小换算成rem时只需除以100即可，即设计图中元素大小为100px，那么CSS中直接设置为1rem即可。