移动端适配

头部添加meta标签

 1 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 

配合JS

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

页面的尺寸是相对640设计图来设定rem单位

例如:设计图--height:40px

实际我们设定为--height:0.4rem

原文地址:https://www.cnblogs.com/q460021417/p/5112154.html