vue3 + vite 自适应(rem 适配)方法
# 操作方法
postcss-pxtorem #是PostCSS的插件,用于将像素单元生成rem单位
autoprefixer #浏览器前缀处理插件
amfe-flexible #可伸缩布局方案 替代了原先的lib-flexible 选用了当前众多浏览器兼容的viewport
1
2
3
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
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";
1
# 其他
引入一个自适应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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
上次更新: 2024/01/30, 00:35:17
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13