uniapp rem 的适配解决方案

uniapp rem 的适配方案

pnpm 安装两个包

1. install amfe-flexible --save
2. install postcss-pxtorem --save-dev

vite.config.ts 里配置

export default defineConfig({
  plugins: [
    vue(),
    viteCompression(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    alias: {
      '@/': new URL('./src/', import.meta.url).pathname,
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@use "@/styles/global-variables.scss" as *;',
      },
    },
    postcss: {
      plugins: [
        // rem 适配
        require('postcss-pxtorem')({
          // 把px单位换算成rem单位
          rootValue: 20, //换算基数，
          unitPrecision: 3, //允许REM单位增长到的十进制数字,小数点后保留的位数。
          propList: ['*'],
          exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
          selectorBlackList: ['.van'], //要忽略并保留为px的选择器，本项目我是用的vant ui框架，所以忽略他
          mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
          minPixelValue: 1, //设置要替换的最小像素值
        }),

        require('autoprefixer'),
        {
          postcssPlugin: 'internal:charset-removal',
          AtRule: {
            charset: (atRule) => {
              if (atRule.name === 'charset') {
                atRule.remove()
              }
            },
          },
        },
      ],
    },
  },
  build: {
    terserOptions: {
      compress: {
        drop_console: true,
      },
    },
  },
})

src -> assets -> ts -> rem.ts

// 基准大小
const baseSize = 37.5
// 设置 rem 函数
function setRem() {
  // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 750
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}
// 在 ts 里是需要导出的, 不然会报错, ts 还没学到具体不太清除
export {}

main.js 引入

1. import 'amfe-flexible'
2. import './assets/ts/rem'
3. 因为是修改的配置文件, 所以配置完毕需要重启项目