vue3-vite下配置postcss-pxtorem进行移动端适配

本文章向大家介绍vue3-vite下配置postcss-pxtorem进行移动端适配，主要内容包括amfe-flexable、postcss-pxtorem、在Vite中进行配置使用、使用实例、应用技巧、基本知识点总结和需要注意事项.

如果使用Vue进行移动端页面的开发，需要对不同机型的宽高进行适配。最常用的方法是使用amfe-flexable和postcss-pxtorem这两个插件来帮助进行适配。

如果使用Vue进行移动端页面的开发，需要对不同机型的宽高进行适配。最常用的方法是使用amfe-flexable和postcss-pxtorem这两个插件来帮助进行适配。

amfe-flexable

amfe-flexable是阿里发布的一套可伸缩适配方案。它能根据设备的宽高来设置页面body元素的字体大小，将1rem设置为设备宽度/10以及在页面大小转换时可以重新计算这些数值。

postcss-pxtorem

postcss-pxtorem是postcss的一个插件，可以将对应的像素单位转换为rem。在vite中可以直接对其进行配置，因为vite已经集成了postcss。

其中最重要的配置属性为：

• rootValue：根元素的值，即1rem对应的像素值大小。一般设置为设计稿尺寸/10

以及一些其他属性：

• propList：需要进行转换的css属性的值，可以使用通配符。如：*意思是将全部属性单位都进行转换；["*position*"]会匹配到background-position-y
• selectorBlackList：不进行单位转换的选择器。如设置为字符串body，则所有含有body字符串的选择器都不会被该插件进行转换；若设置为[/^body$/]，则body会被匹配到而不是.body
• exclude：不需要进行单位转换的文件
• mediaQuery：是否允许像素在媒体查询中进行转换

在Vite中进行配置使用

//npm方式
npm install postcss-pxtorem --save-dev
npm install amfe-flexible --save-dev

//pnpm方式
pnpm add postcss-pxtorem -D
pnpm add amfe-flexible -D

在main.js中引入

import 'amfe-flexible'

在vite.config.js中配置postcss-pxtorem

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

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css:{
    postcss:{
      plugins:[
        postCssPxToRem({
          rootValue:37.5,
          propList:['*'],
        })
      ]
    }
  }
})