vue项目页面适配

vue项目页面适配

目的：结合动态设置根字体大小的脚本（如通过 JavaScript 监听屏幕尺寸变化），实现页面元素在不同设备上的自适应缩放

1、安装postcss-pxtorem

### 若项目未集成 postcss，需同步安装：
npm install postcss postcss-pxtorem@5.1.1 --save-dev  ### 单独安装postcss-pxtorem：
npm install postcss-pxtorem --save-dev  	# 适用于最新版本兼容的项目
npm install postcss-pxtorem@5.1.1 --save-dev  	# 适用于指定版本安装

2、添加rem.js

• rem 单位特性‌：1rem 等于根元素的字体大小，通过调整根字体值（如 32px → 64px），所有使用 rem 的元素按比例放大/缩小12。
• ‌自动化流程‌：在构建阶段（如 Webpack/Vite），插件自动扫描 CSS 文件并完成 px → rem 转换，减少手动计算成本

const baseSize = 14;function setRem() {const scale = document.documentElement.clientWidth / 750;document.documentElement.style.fontSize =baseSize * Math.min(scale, 1.2) + "px";
}setRem();
window.onresize = function() {setRem();
}

3、在main.js中添加文件引用

import "./config/rem";

4、在vite.config.js中添加postcss-pxtorem

import postCssPxToRem from 'postcss-pxtorem'~~~css:{postcss:{plugins:[postCssPxToRem({rootValue:14,propList:['*'],})]
}

5、居中适配

在style.css中添加：

body {padding: 0;margin: 0px auto;max-width: 750px;background-color: #6D24A2;
}