移动端适配是我们在开发中经常会遇到的,但是在适配过程中也往往有很多问题,并且还需要写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
})
]
}
}
}
}