VUE PC端适配方案flexible+px2remLoader
利用webpack配置px2rem-loader和lib-flexible来实现px转化rem1、安装npm install px2rem-loader -Dnpm install lib-flexible -S2.参照官网配置方法// 增加代码,px转rem配置(需要将px2remloader添加进loaders数组中)const px2remLoader = {loa...
·
利用webpack配置px2rem-loader和lib-flexible来实现px转化rem
1、安装
npm install px2rem-loader -D
npm install lib-flexible -S
2.参照官网配置方法
// 增加代码,px转rem配置(需要将px2remloader添加进loaders数组中)
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 192, //根据视觉稿,rem为px的十分之一,1920px 192 rem
// remPrecision: 8//换算的rem保留几位小数点
}
}
但是,重新启动项目比例不对,需要修改代码。
在main.js中引入文件
import './utils/flexible.js'
查看flexible代码,发现
需要将代码修改为适应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;
}
重启项目,发现一切运行正常。
对了,需要注意的事,一般不对1px的边框进行换算,只需要哎样式后面添加/no/即可保证不被转换
.login
width: 1920px;
height: 200px;
font-size: 32px;
border: 1px solid red;/*no*/
background : $color-buttonSure
希望对大家有帮助~
更多推荐
已为社区贡献3条内容
所有评论(0)