vue-cli3.0 结合postcss-pxtorem和lib-flexible实现移动端适配

基于vue做了一个移动端的项目，同时引入的了第三方组件库（有赞vant）。当时选择用rem件来做适配。其他内容可以正常显示，但是引起了第三方插件内容变小的问题。现将解决方法整理出来。

原因

第三方组件库变小的原因主要是因为第三方组件库已经做了适配，依据的data-dpr="1"时写的。而引入插件进行rem适配时，data-dpr不是一个写死的，而是一个动态的了。

走过的弯路

当时试过px2rem 、 postcss-px2rem-exclude等插件，以及尝试过修改配置代码node_modules/postcss-px2rem-exclude/lib/index.js；希望适配的时候忽略第三方组件。这样做安卓机有效果，但是苹果机还是没有效果的。

解决思路

认真看了vant组件的介绍，选择用官网推荐的postcss-pxtorem和lib-flexible来实现rem适配。其中的rootValue:37.5 不建议修改。注意，若使用37.5则设计稿也建议使用375为标准的，尝试过使用75的，但是有赞自身组件在真机上还是有点奇怪。下面说明，引用有赞组件官网。

Rem 适配
Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具

• postcss-pxtorem 是一款postcss插件，用于将单位转化为rem
• lib-flexible  用于设置rem基准值

步骤

（1）安装postcss-pxtorem

$ npm install postcss-pxtorem --save-dev

（2）安装lib-flexible

$ npm i -S  amfe-flexible

（3）在main.js中引入lib-flexible

import  'lib-flexible';

（4）在postcss.config.js文件中进行配置

  module.exports = {
     
    plugins: {
     
      'autoprefixer': {
     
        browsers: ['Android >= 4.0', 'iOS >= 7']
      },
      'postcss-pxtorem': {
     
        rootValue:37.5,
        propList: ['*', '!border'],
      }
    }
  }

以上就完成适配啦~

也可以使用vue-cli3 在index.html（以下是在同级目录中）中引入flexible

<script src="<%= BASE_URL %>flexible_css.js,flexible.js"></script>

flexible_css.js,flexible.js

!function(){
     var a="@charset \"utf-8\";html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}html,body{font-family:sans-serif}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}abbr,acronym{border:0;font-variant:normal}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}q:before,q:after{content:''}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}a:hover{text-decoration:underline}ins,a{text-decoration:none}",b=document.createElement("style");if(document.getElementsByTagName("head")[0].appendChild(b),b.styleSheet)b.styleSheet.disabled||(b.styleSheet.cssText=a);else try{
     b.innerHTML=a}catch(c){
     b.innerText=a}}();!function(a,b){
     function c(){
     var b=f.getBoundingClientRect().width;b/i>540&&(b=540*i);var c=b/10;f.style.fontSize=c+"px",k.rem=a.rem=c}var d,e=a.document,f=e.documentElement,g=e.querySelector('meta[name="viewport"]'),h=e.querySelector('meta[name="flexible"]'),i=0,j=0,k=b.flexible||(b.flexible={
     });if(g){
     console.warn("将根据已有的meta标签来设置缩放比例");var l=g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);l&&(j=parseFloat(l[1]),i=parseInt(1/j))}else if(h){
     var m=h.getAttribute("content");if(m){
     var n=m.match(/initial\-dpr=([\d\.]+)/),o=m.match(/maximum\-dpr=([\d\.]+)/);n&&(i=parseFloat(n[1]),j=parseFloat((1/i).toFixed(2))),o&&(i=parseFloat(o[1]),j=parseFloat((1/i).toFixed(2)))}}if(!i&&!j){
     var p=(a.navigator.appVersion.match(/android/gi),a.navigator.appVersion.match(/iphone/gi)),q=a.devicePixelRatio;i=p?q>=3&&(!i||i>=3)?3:q>=2&&(!i||i>=2)?2:1:1,j=1/i}if(f.setAttribute("data-dpr",i),!g)if(g=e.createElement("meta"),g.setAttribute("name","viewport"),g.setAttribute("content","initial-scale="+j+", maximum-scale="+j+", minimum-scale="+j+", user-scalable=no"),f.firstElementChild)f.firstElementChild.appendChild(g);else{
     var r=e.createElement("div");r.appendChild(g),e.write(r.innerHTML)}a.addEventListener("resize",function(){
     clearTimeout(d),d=setTimeout(c,300)},!1),a.addEventListener("pageshow",function(a){
     a.persisted&&(clearTimeout(d),d=setTimeout(c,300))},!1),"complete"===e.readyState?e.body.style.fontSize=12*i+"px":e.addEventListener("DOMContentLoaded",function(){
     e.body.style.fontSize=12*i+"px"},!1),c(),k.dpr=a.dpr=i,k.refreshRem=c,k.rem2px=function(a){
     var b=parseFloat(a)*this.rem;return"string"==typeof a&&a.match(/rem$/)&&(b+="px"),b},k.px2rem=function(a){
     var b=parseFloat(a)/this.rem;return"string"==typeof a&&a.match(/px$/)&&(b+="rem"),b}}(window,window.lib||(window.lib={
     }));