【Vue】Vue3项目使用 amfe-flexible + postcss-pxtorem 完成移动端的rem布局适配

【Vue】Vue3项目使用 amfe-flexible + postcss-pxtorem 完成移动端的rem布局适配

一、amfe-flexible 的使用

1、安装amfe-flexible 和 postcss-pxtorem 依赖

npm install amfe-flexible postcss-pxtorem -D

2、vite.config.js中引入插件及配置

import { defineConfig } from 'vite'
import postCssPxToRem from 'postcss-pxtorem'

defineConfig({
    css: {
      // 配置 CSS modules 的行为。选项将被传递给 postcss-modules
      modules: {},
      // 内联的 PostCSS 配置（格式同 postcss.config.js）
      postcss: {
        plugins: [
          postCssPxToRem({
            rootValue: 37.5, // 1rem 的大小
            propList: ['*'], // 需要转换的属性，*(全部转换)
            unitPrecision: 6 // 转换精度，保留的小数位数
          })
        ]
      }
    }
 })

3、main.js中引入amfe-flexible

import 'amfe-flexible' // rem 布局适配

启动项目后，从浏览器调试工具中可以看到html根字体已变成了37.5px，为元素设置的样式已经变成了rem。

二、lib-flexible 和 amfe-flexible

常用的还有一个插件是lib-flexible，使用方式和amfe-flexible一样，但不知道为什么使用lib-flexible时html的根字体成了37.52px，虽然转换成rem精确到6位小数后几乎没什么差别了，但总感觉可能会有意想不到的情况发生，所以还是使用了amfe-flexible。