vue移动端、PC自适应(配置postcss-px2rem)
现在配置postcss-px2rem移动端适配的方法大致有几种:不管用那种方法配置,首先拉取依赖npm lib-flexible postcss-px2rem,或者npm lib-flexible postcss-pxtorem,两种配置的依赖是不一样的,要注意。这里没加–save是因为npm拉包默认就给你加到package.json的依赖里去了然后以下配置方法任选一种使用1.在postcss.c
现在配置postcss-px2rem移动端适配的方法大致有几种:
不管用那种方法配置,首先拉取依赖lib-flexible 和 postcss-px2rem 一对
,或者lib-flexible 和 postcss-pxtorem 一对
,两种配置的依赖是不一样的,要注意。npm拉包默认就给你加到运行依赖里去了,拉开发依赖包时再加上-D
。lib-flexible
是运行依赖后面那个postcss-px2rem、postcss-pxtorem
是开发依赖
然后以下配置方法任选一种使用
1.在postcss.config.js中配置(postcss-pxtorem 版本为^5.1.1)
module.exports = {
plugins: {
'autoprefixer': {
overrideBrowserslist: [
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >= 8"
]
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
};
2.在vue.config.js中配置(postcss-px2rem)
module.exports={
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require('postcss-px2rem')({
//lib-flexible 将屏幕分成10份(10rem),这里设置表示设计图宽度为10*37.5=375px
// 配置成 37.5 是为了兼容 没有适配 rem 布局的第三方 ui 库
remUnit: 37.5
})
]
}
}
},
}
3.其它
配置完成后注意删除掉index.html里的视窗meta标签 <meta name='viewport'> 以便让插件帮你生成。
最后在main.js里引入lib-flexible import 'lib-flexible'
npm run serve看看吧,原来用px写的css,插件已经帮我们转成rem了,不过注意两种配置的依赖postcss-pxtorem和postcss-px2rem有差别哦。
如果在适配时需要排除一些UI组件库的话可以这么做:
先拉取postcss-px2rem-exclude
依赖包
无需上面的配置了,直接在postcss.config.js里作这一个配置即可
module.exports = {
plugins: {
autoprefixer: {},
"postcss-px2rem-exclude": {
"remUnit": 75,
"exclude": /node_modules/i
}
}
}
这个配置设置屏幕宽度为10rem*75px=750px,原来的box的width='375px’被转换为5rem,并排除了/node_modules下的内容,使UI组件大小不变。
适配PC端也很简单
找到lib-flexible包,注释掉如下的判断条件代码,让其在宽度大于540像素也适用。
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
// if (width / dpr > 540) {
// width = 540 * dpr;
// }
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
不想被转换成rem,将px大写即可
.box{
width:200PX;
height:200PX;
}
更多推荐
所有评论(0)