移动端适配:pxtorem

447 阅读1分钟

移动端适配是我们在开发中经常会遇到的,但是在适配过程中也往往有很多问题,并且还需要写js逻辑去计算不同手机下的字号等,下面主要记录的是一个比较简易好用的方法:pxtorem

一、先安装需要的插件

npm install --save lib-flexible
npm install postcss-pxtorem@5.1.1 -D 
pm install postcss postcss-loader -D

二、在main.js中全局引入

import "lib-flexible/flexible.js";

三、在vue.config.js进行配置

const autoprefixer = require('autoprefixer') 
const pxtorem = require('postcss-pxtorem')
module.exports = {
    css: {
        loaderOptions: {
          postcss: {
            plugins: [
              autoprefixer(),
              pxtorem({
                rootValue: 75,  // 根字体大小,如果设计图是750的话 
                unitPrecision: 5,
                propList: ['*'], // 作用在哪些属性上 我这里用的是通配符
                replace: true,
                mediaQuery: false,
                minPixelValue: 0,
                exclude: /node_modules/i
              })
            ]
          }
        }
      }
}