![39e699609c235d9192499650b6062cf1.png](https://i-blog.csdnimg.cn/blog_migrate/7ce14e83103d115b28c654931e108760.jpeg)
如果你需要开发、维护手机端项目,肯定时常为兼容不同屏幕尺寸的手机效果而费时。
通常我们的设计稿都是绝对单位PX,而最好的兼容效果是使用相对单位REM。我们可以通过px2rem-loader进行单位转换,并使用手淘的lie-flexible库,在页面渲染时来计算根元素的font-size值。
下载依赖
npm install px2rem-loader lie-flexible --save-dev
在webpack的配置中引入
module.exports = {
// ...
module: {
rules: [{
test: /.less$/,
use: ['style-loader', 'css-loader', 'less-loader', {
loader: 'px2rem-loader',
options: {
remUni: 75, // 适合750的设计稿 1rem = 75px
remPrecision: 8 // px转rem小数点保留的位置
}
}]
}]
}
}
在项目中引入lie-flexible
<script src="lib-flexible/flexible.js"></script>
lib-flexible应最早执行
这样就可以实现PX到REM单位的自动转化了~