1.安装插件postcss-px2rem在终端执行：npminstallpostcss-px2rem--save2。在build/vue-loader.conf.js中配置postcss-px2remmodule.exports={loaders:utils.cssLoaders({sourceMap:isProduction?config.build.productionSourceMap:config.dev.cssSourceMap,extract:isProduction}),postcss:[require('autoprefixer')({browsers:['iOS>=7','Android>=4.1']}),require('postcss-px2rem')({remUnit:75,'baseDpr':2})],transformToRequire:{video:'src',source:'src',img:'src',image:'xlink:href'}}3.适配2x和3x屏幕的打包flex.js；(function(win,lib){vardoc=win.document;vardocEl=doc.documentElement;varmetaEl=doc.querySelector('meta[name="viewport"]');varflexibleEl=doc.querySelector('meta[name="flexible"]');vardpr=0;varscale=0;vartid;varflexible=lib.flexible||(lib.flexible={});if(metaEl){//console.warn('缩放将根据现有元标记设置');varmatch=metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);如果（匹配）{scale=parseFloat（匹配[1]）；dpr=parseInt(1/比例);}varcontent=flexibleEl.getAttribute('content');如果（内容）{varinitialDpr=content.match(/initial\-dpr=([\d\.]+)/);varmaximumDpr=content.match(/maximum\-dpr=([\d\.]+)/);如果(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){varisAndroid=win.navigator.appVersion.match(/android/gi);varisIPhone=win.navigator.appVersion.match(/iphone/gi);vardevicePixelRatio=win.devicePixelRatio;if(isIPhone){//iOS下，对于2和3的屏幕，用2倍的方案，其余使用1x方案if(devicePixelRatio>=3&&(!dpr||dpr>=3)){dpr=3;}elseif(devicePixelRatio>=2&&(!dpr||dpr>=2)){dpr=2;}否则{dpr=1;}}else{//在其他设备下，仍然使用1-fold方案dpr=1;}规模=1/dpr;}docEl.setAttribute('data-dpr',dpr);如果(!metaEl){metaEl=doc.createElement('meta');metaEl.setAttribute('名称','视口');metaEl.setAttribute('content','initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no');如果(docEl.firstElementChild){docEl.firstElementChild.appendChild(metaEl);}else{varwrap=doc.createElement('div');wrap.appendChild(metaEl);doc.write(wrap.innerHTML);}}函数refreshRem(){varwidth=docEl.getBoundingClientRect().width;如果（宽度/dpr>540）{宽度=540*dpr;}varrem=宽度/10;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){varval=parseFloat(d)*this.rem;如果（类型d==='string'&&d.match(/rem$/)){val+='px';}返回值；}flexible.px2rem=function(d){varval=parseFloat(d)/this.雷姆;if(typeofd==='string'&&d.match(/px$/)){val+='rem';}返回值；}})(window,window['lib']||(window['lib']={}));4.引入flex.jsimport'@/assets/js/flex.js';importVuefrom'vue';importAppfrom'./App';Vue.config.productionTip=false/*eslint-disableno-new*/newvue({el:'#app',render:h=>h(App)})5.你可以在css中快乐是时候写css了，使用px，下面上传代码；#app{宽度：200px；高度：400px；背景：红色；}职场小白南乔，希望大家多多批评指正，祝大家学习愉快！
