vue3 + vite 自适应（rem 适配）方法

# 操作方法

postcss-pxtorem #是PostCSS的插件，用于将像素单元生成rem单位
autoprefixer #浏览器前缀处理插件
amfe-flexible #可伸缩布局方案 替代了原先的lib-flexible 选用了当前众多浏览器兼容的viewport

1
2
3

配置autoprefixer，与package.json同级目录创建postcss.config.js文件：

module.exports = {
	plugins: {
		autoprefixer: {
			overrideBrowserslist: [
				"Android 4.1",
				"iOS 7.1",
				"Chrome > 31",
				"ff > 31",
				"ie >= 8",
				"last 10 versions" // 所有主流浏览器最近10版本用
			],
			grid: true
		},
		"postcss-pxtorem": {
			rootValue: 192, // 设计稿宽度的1/ 10
			propList: ["*", "!border"], // 除 border 外所有px 转 rem
			selectorBlackList: [".el-"] // 过滤掉.el-开头的class，不进行rem转换
		}
	}
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在main.js中引入amfe-flexible即可:

import "amfe-flexible/index.js";

# 其他

引入一个自适应js

// rem等比适配配置文件
// 基准大小
// baseSize = 16 （fontSize = 16）
// 设置 rem 函数
function setRem() {
  // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 1920; //当前设计稿为1920  如果是750则 替换为 750
  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
  document.documentElement.style.fontSize = 16 * Math.min(scale, 2) + 'px';
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem();
  // window.location.reload();
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#Vue

上次更新: 2024/01/30, 00:35:17

← Vue2.x 组件通信方式 vue3+vite：本地代理，配置proxy→