Vite + vue3 项目使用 amfe-flexible 和 postcss-pxtorem 实现不同屏幕自适应

news2024/10/7 18:25:46

amfe-flexible 和 postcss-pxtorem 可以一起使用来实现移动端的适配效果。

amfe-flexible 主要用于动态设置根元素字体大小（rem），以根据屏幕尺寸进行自适应布局。它会根据设备的屏幕宽度计算出根元素字体大小，并将其设置为页面的根元素的字体大小。然后，开发者可以在 CSS 样式中使用 rem 单位来设置元素的尺寸和间距，从而实现自适应布局。

postcss-pxtorem 是一个 PostCSS 插件，用于将 CSS 中的像素单位（px）转换为 rem 单位。它会在构建过程中自动分析 CSS 文件，将指定的像素值转换为相应的 rem 值，以适应动态设置的根元素字体大小。

配置 amfe-flexible

配置 amfe-flexible 非常简单，只需要安装引入一下即可

安装 amfe-flexible

npm install amfe-flexible --save

###在 main.js 引入

import 'amfe-flexible'

配置 postcss-pxtorem

配置 postcss-pxtorem 也不难，只需要安装在 vite.config.js 配置一下就行

安装

npm install postcss postcss-pxtorem --save-dev

vite.config.js 配置

import pxtorem from 'postcss-pxtorem';
export default defineConfig({
  plugins: [
    vue()
  ],
  css: {
    postcss: {
      plugins: [
        pxtorem({
          rootValue: 75, // 这里写设计稿的宽度/10即可，例如设计稿宽度是750px就写75
          // vant默认是37.5，如果是使用了vant的话可以像下面这样写
          // rootValue(res) {
          //   return res.file.indexOf("vant") !== -1 ? 37.5 : 75;
          // },
          propList: ['*'], // 需要转换的属性，默认转换所有属性
          selectorBlackList: [] // CSS选择器黑名单，防止部分选择器被转换
          exclude: /\/node_modules\//i, // 忽略包文件转换rem
        })
      ]
    }
  }
});