通常来说ui设计师设计效果图大多都是按照750px宽度的分辨率来设计的,那么前端在做页面的时候,第一个要考虑的肯定是需要兼容不同移动端设备的分辨率问题。
若是使用较傻的办法就是用百分比%一点点做自适应,但是肯定是比较慢的,然后我们项目是一个移动端项目,需要适配各种移动设备,所以这时候就考虑用rem了做兼容了。
步骤如下:
- 在main.js里引入rem.js文件,rem.js文件可以建在src下一个公共工具文件下,rem.js文件内容如下:
// rem.js
// 基准大小
const baseSize = 30
// 设置 rem 函数
function setRem () {
// 当前页面宽度相对于 7jianr50 宽的缩放比例,可根据自己需要修改。
const scale = document.documentElement.clientWidth / 750
// 设置页面根节点字体大小
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}
- 引入插件postcss-pxtorem,用于px转化成rem,我这里引入的版本是^5.1.1,然后在根目录上新建文件postcss.config.js文件(因为项目是vue2+vant结合的,所以这里是设置vant组件库相关文件保持原样)
// postcss.config.js
module.exports = {
plugins: {
autoprefixer: {},
'postcss-pxtorem': {
rootValue({
file
}) {
return file.indexOf('vant') !== -1 ? 16 : 30;
},
propList: ['*'],
},
}
}
搞定结束,按照750px宽度的设计图去开发就行,不用又改px又改百分比那么麻烦了,整完上面就会自动帮你兼容不同类型的移动端设备了~