vue2移动端项目+750设计图怎么兼容不同的移动端设备分辨率

最新推荐文章于 2024-07-07 00:07:17 发布

w203_666

最新推荐文章于 2024-07-07 00:07:17 发布

阅读量439

点赞数 5

CC 4.0 BY-SA版权

文章标签： javascript vue

本文链接：https://blog.csdn.net/w203_666/article/details/139684727

通常来说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: ['*'],
		},
	}
}