移动端适配-(postcss-pxtorem)
基于vue+vant的移动端适配(rem)1.下载lib-flexible --savenpm i lib-flexible --save2.在main.js中引入lib-flexiblemain.jsimport 'lib-flexible/flexible'3.设置meta标签<meta name="viewport" content="width=device-width, initi
·
基于vue+vant的移动端适配(rem)
1.下载lib-flexible --save
npm i lib-flexible --save
2.在main.js中引入lib-flexible
main.js
import 'lib-flexible/flexible'
3.设置meta标签
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
4.安装postcss-pxtorem
用于把px转换rem的插件
npm install postcss-pxtorem -D
5.配置postcss-pxtorem
在下载完postcss-pxtorem的时候根目录会自动生成一个.postcssrc.js,尽心编辑修改
如果没有的话可以手动创建
module.exports = {
plugins: {
//...
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 37.5, //vant-UI的官方根字体大小是37.5
propList: ['*']
}
}
}
6.注意,由于为了适配vant ui(vant官方默认字体是37.5px),所以这里rootvalue设为37.5
如果图纸是750的话,实际单位要进行缩小一半
更多推荐
已为社区贡献5条内容
所有评论(0)