vue项目页面适配

vue项目页面适配

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

1、安装postcss-pxtorem

### 若项目未集成 postcss，需同步安装：
npm install postcss [email protected] --save-dev  

### 单独安装postcss-pxtorem：
npm install postcss-pxtorem --save-dev  	# 适用于最新版本兼容的项目
npm install [email protected] --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;
}