Vue3 可视化大屏开发 采用postcss自适应屏幕

一、postcss-px2rem介绍

postcss-px2rem 是一个 PostCSS 插件，用于将 CSS 文件中的 px 单位自动转换为 rem 单位，以实现响应式布局。

在移动端开发中，使用 rem 单位可以根据不同设备的屏幕大小动态调整元素的大小，以适应不同的屏幕尺寸。而使用固定的 px 单位则无法实现这种自适应效果。postcss-px2rem 可以帮助开发者简化这一转换过程。

通过配置 postcss-px2rem 插件，在编译 CSS 时，它会将所有的 px 单位转换为 rem 单位，并根据开发者预设的基准值进行计算。通常情况下，基准值是根据设计稿的宽度来确定的，比如设置为 75 或 100，表示 1rem 等于 75px 或 100px。

使用 postcss-px2rem 插件后，开发者可以在 CSS 中直接使用 px 单位编写样式，而插件会自动将其转换为 rem 单位，从而实现响应式布局的效果。

需要注意的是，使用 postcss-px2rem 插件需要配合 viewport 相关的 meta 标签一起使用，以确保 rem 单位能够正确地适应不同的屏幕尺寸

二、安装postcss-px2rem

npm install postcss-px2rem --save

三、在根目录src中新建util，目录下新建rem.js等比适配文件

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

四、在 main.ts中引入 rem.js文件

import './utils/rem.js'

五、在vue.config.js中配置插件

// 引入等比适配插件
const px2rem = require('postcss-px2rem')

// 配置基本大小
const postcss = px2rem({
  // 基准大小 baseSize，需要和rem.js中相同
  // remUnit: 14 代表 1rem = 14px; 所以当你一个14px值时，它会自动转成 (14px/14)rem
  remUnit: 14
})

module.exports = defineConfig({
  css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [postcss],
        },
      },
    },
  },
})

六、重新启动项目