vue移动端项目中使用postcss-pxtorem进行适配方案

首先，我们先使用vue-cli创建一个初始化的vue项目。

vue create hello-world

当项目创建好以后，我们在根目录下新建一个vue.config.js，想必大家也都懂这个文件是干什么的。

既然是使用postcss-pxtorem对移动端项目进行适配，那肯定先要安装它，于是我们在电脑上敲下这行命令

npm install postcss-pxtorem -D

postcss-pxtorem有一个好伙伴amfe-flexible，也需要一并安装。

npm install amfe-flexible -D

当我们安装好这两个依赖以后呢，我们就要使用它们了，先在main.js中引入amfe-flexible

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 引入amfe-flexible
import 'amfe-flexible/index'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

然后我们在vue.config.js文件中对postcss-pxtorem进行配置。

const autoprefixer = require('autoprefixer')  // 这个依赖不用安装
const pxtorem = require('postcss-pxtorem')

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer(),
          pxtorem({
            rootValue: 37.5,  // 根字体大小，如果设计图是750的话 记得除2
            unitPrecision: 5,
            propList: ['*'], // 作用在哪些属性上 我这里用的是通配符
            selectorBlackList: ['vant-'], // 将哪些html元素排除在外，我这里添加了一个vant的
            replace: true,
            mediaQuery: false,
            minPixelValue: 0,
            exclude: /node_modules/i
          })
        ]
      }
    }
  }
}

其实这个时候呢，我们的项目就可以正常运行起来了。但是为了看一下效果和我们预期的一样不一样，我们还是写一个简单的demo来看看吧！

我们在页面中写一个按钮，这个按钮的大小在设计图（750的设计图）上的宽度是540px 高度是100px。那么我们在书写css代码的时候就应该除以2（因为我们设置的根字体大小是37.5）。来看一下代码和效果吧

html代码如下

充值

css代码如下

.btn {
      width:270px;
      height:50px;
    }

我们来看一下页面的效果吧！

这是在iphone6的样式，证明和我们想要的效果是一样的。

希望这篇文章能够帮助到你。加油！