vue移动端项目rem自适应适配插件postcss-pxtorem的使用
文章目录一、安装依赖插件1.下载 postcss-pxtorem, 用于将 px 单位转化为 rem 单位2.下载 amfe-flexible ,用于设置 rem 基准值二、配置1. 在配置文件(vue.config.js)里面引入postcss-pxtorem,并配置2. 在mind.js文件引入amfe-flexible3. 在index.html头部加入手机端自适应meta三、使用一、安装依
·
文章目录
一、安装依赖插件
1.下载 postcss-pxtorem, 用于将 px 单位转化为 rem 单位
npm install postcss-pxtorem --save
如果版本过高可以降版本下载5.1.1版本
npm install postcss-pxtorem@5.1.1 --save
2.下载 amfe-flexible ,用于设置 rem 基准值
npm install amfe-flexible --save
二、配置
1. 在配置文件(vue.config.js)里面引入postcss-pxtorem,并配置
const pxtorem = require('postcss-pxtorem')
module.exports = {
css: {
extract: { ignoreOrder: true },
loaderOptions:{
postcss: {
plugins: [
pxtorem({
rootValue: 37.5,//这个尺寸可以根据自己的图去配置,这里配置的是宽度375的图(如果用了vant插件)
propList: ['*'],
selectorBlackList: ['van-circle__layer']
})
]
}
}
}
};
2. 在mind.js文件引入amfe-flexible
import 'amfe-flexible';
3. 在index.html头部加入手机端自适应meta
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
三、使用
以上步骤配置好之后,页面其他的尺寸就可以按照设计图纸的大小去写了,到浏览器就会自动转换为rem单位
更多推荐
已为社区贡献3条内容
所有评论(0)