vue适配不同电脑分辨率(vue3.x)
1、安装插件第一个是一种弹性布局方案,第二个插件是px转成rem的插件npm i lib-flexible -Snpm i px2rem-loader -D2、安装完成后在node_modules中查找flexible.js文件,将代码修改为适应PC端的代码function refreshRem(){var width = docEl.getBounding...
·
1、安装插件
第一个是一种弹性布局方案,第二个插件是px转成rem的插件
npm i lib-flexible -S
npm i px2rem-loader -D
2、安装完成后在node_modules中查找flexible.js文件,将代码修改为适应PC 端的代码
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = width * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
3、在项目的根目录下面新建一个js文件
4、添加如下代码:
module.exports = {
// configureWebpack: {
// externals: {
// "BMap": "BMap"
// }
// },
css: {
loaderOptions: {
postcss: {
plugins: [
// 把px单位换算成rem单位
require("postcss-pxtorem")({
rootValue: 75, // 换算的基数(设计图750的根字体为32)
selectorBlackList: [".van"],// 要忽略的选择器并保留为px。
propList: ["*"], //可以从px更改为rem的属性。
minPixelValue: 2 // 设置要替换的最小像素值。
})
]
}
}
}
}
5、重新npm run一下
对于不想被转换的样式,可在其对应css后添加/no/保证不被转换
更多推荐
已为社区贡献16条内容
所有评论(0)