vue3网页适配方案

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 单位能够正确地适应不同的屏幕尺寸。

 px2rem-loader介绍

px2rem-loader 是一个 Webpack loader，用于在构建过程中将 CSS 文件中的 px 单位自动转换为 rem 单位，实现移动端适配的功能。

与 postcss-px2rem 插件类似，px2rem-loader 的作用是将开发者编写的 CSS 文件中的 px 单位转换为 rem 单位，以便实现响应式布局。通过在 Webpack 配置中使用 px2rem-loader，开发者可以在构建过程中自动进行这种转换，而无需手动修改源代码。

px2rem-loader 的工作原理是在 Webpack 构建过程中拦截 CSS 文件的加载，将其中的 px 单位转换为 rem 单位，并根据配置的基准值进行计算。这样，在最终生成的 CSS 文件中，所有的 px 单位都会被替换为 rem 单位，从而实现移动端适配的效果。

使用 px2rem-loader 可以简化开发者在移动端项目中进行 rem 单位转换的工作，提高开发效率并确保页面在不同设备上有良好的显示效果。需要注意的是，在配置 px2rem-loader 时，也需要结合 viewport 相关的 meta 标签一起使用，以确保 rem 单位能够正确地适应不同的屏幕尺寸。

lib-flexible介绍

lib-flexible 是一个用于移动端适配的 JavaScript 插件，它的主要作用是根据设备的屏幕宽度动态设置 HTML 标签的 font-size，以实现页面布局的自适应。

在移动端开发中，不同设备的屏幕尺寸各不相同，为了保证页面在不同设备上有良好的显示效果，需要进行屏幕适配。lib-flexible 就是为了解决这个问题而被开发出来的工具。

当引入 lib-flexible 后，它会根据设备的屏幕宽度动态计算出一个合适的基准值，并将其设置为 HTML 标签的 font-size。然后在编写 CSS 样式时，可以使用 rem 单位来定义元素的大小，这样就可以根据根元素的 font-size 动态调整元素的大小，实现移动端的自适应布局。

另外，lib-flexible 还可以配合 postcss-px2rem 或者 px2rem-loader 等工具一起使用，进一步简化 px 到 rem 的转换过程，提高开发效率。

总的来说，lib-flexible 主要用于解决移动端适配的问题，帮助开发者实现页面布局的自适应，让页面能够在不同设备上都能够得到良好的显示效果。

文件配置需求

安装命令

npm i postcss-px2rem

npm i px2rem-loader

npm i lib-flexible

在main.js中引入插件

.......

import 'lib-flexible'

...

 在vite.config.js文件配置以下（全），根据需要截取即可

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// 引入postcss-x2rem
import px2rem from "postcss-px2rem"  // 分辨率适配

export default defineConfig({
  plugins: [
    vue(),
  ],
  define: {
    'process.env': {},
  },
  // css 分辨率适配
  css: {
    postcss: {
      plugins: [
        px2rem({
          // 根据设计稿（1920的）
          remUnit: 192
        })
      ]
    }
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

找到node_modules/lib-flexible/flexible.js修改代码如下

 function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            // width = 540 * dpr;
            // pc适配的话 540改为width
            width = width * dpr; 
        }
        var rem = width * dpr;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }