vue-cli4 项目中移动端适配

记得最早写移动端都是在入口html页面头部中写上以下js，设置根字体大小为页面可见区域宽

window.onload = function(){
  init()
}
function init(){
  var fontSize = document.documentElement.clientWidth
  document.body.parentNode.style.fontSize = fontSize +'px'
}

然后在写css 样式时候，定义一个sass函数，$basePx是根据设计图来定义的，这里的750，是因为通常移动端设计图都是基于iphone6设计的

$basePx: 750;
@function pxCount($px){
  @return $px / $basePx + rem;
}

定义完scss函数，在写css样式时候就可以直接将量取到的px值传入pxCount中了，例如：一个div宽度100px,高度30px，就可以这样写了

div{
  width: pxCount(100);
  height: pxCount(30);
}

通过一些插件，在保存样式时候会自动编译一份.css的样式文件，编译后的样式文件，里面自动给转成了rem，最后在html页面中引入就可以啦

现在开发移动端项目，就不用这么麻烦了，不需要自己去在页面头部中设置根字体大小，也不需要自己定义scss函数，将px转成rem。
简单的安装几个依赖，修改下配置，就可以轻松实现移动端适配。

既然这么简单，那就开始吧

1. 在项目中，安装以下依赖

     npm install amfe-flexible -S
     npm install postcss-pxtorem -D
   

   amfe-flexible依赖，实现移动端自适应

   由于viewport单位得到众多浏览器的兼容，lib-flexible这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用viewport来替代此方。

   postcss-pxtorem依赖，可以将px自动转成rem，写样式时，直接写，不用转换

2. 在项目入口js(main.js)中引入amfe-flexible

    import 'amfe-flexible'
   

3. 在项目根目录新建vue.config.js文件，添加如下配置

   module.exports = {
     // ...其他配置
     css: {
       loaderOptions: {
         postcss: {
           plugins: [
             require('postcss-pxtorem')({
               rootValue: 75, // 设置根字体大小，可以依据设计图尺寸写
               propList: ['*'] // 属性的选择器，*表示通用
             })
           ]
         }
       }
     }
   }
   

4. 重新运行项目，在浏览器中查看根字体，并测试是否设置成功

   

   <template>
      <div>
        <div class="width375"></div>
        <div class="width750"></div>
      </div>
    </template>
   
   <style scoped>
     .width375{
       width: 375px;
       height: 10px;
       background: lightblue;
     }
     .width750{
       width: 750px;
       height: 10px;
       background: skyblue;
       margin-top: 50px;
     }
   </style>
   

   

安装依赖后运行报错

报错提示 PostCSS plugin postcss-pxtorem requires PostCSS 8.

解决方法：降低下postcss-pxtorem版本

npm install postcss-pxtorem@5.1.1 -D

若引入了vant ui，需要如下配置

vant-UI的官方根字体大小是37.5，如果设置成37.5，则在设计图中量取的值就需要除以2才可以，若不想在量取的时候计算，则可以设置selectorBlackList，过滤以van开头的类名

module.exports = {
  //...其他配置
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue: 75,
            propList: ['*'],
            selectorBlackList: ['van'] // 过滤van开头的类名，不进行rem转换
          })
        ]
      }
    }
  }
}