vue 移动端适配 自适应布局（vite+webpack）

vue——webpack

rem

需要的插件

npm i -S amfe-flexible 
根据当前页面的尺寸去设置根元素的font-size
npm install postcss-pxtorem --save
将ps绝对单位转成rem相等单位

在main.js中引入

import 'amfe-flexible'

在项目根目录新建一个postcss.config.js文件

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75; // 因为vant框架是以375px的稿子为基础的，所以需要适配一下
      },
      propList: ['*'], // 需要转换的css属性，默认*全部
    }
  }
}

vw、vh

在 Vue 项目中安装 postcss-px-to-viewport 插件

npm install postcss-px-to-viewport --save-dev

在项目根目录下创建 postcss.config.js 配置文件

module.exports = {
  // 其他配置...
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 750, // 设计稿宽度
      unitToConvert: 'px', // 需要转换的单位，默认为"px"
      viewportUnit: 'vw', // 转换后的单位，默认为"vw"
      selectorBlackList: ['.ignore', '.hairlines'], // 不需要转换的类名
      minPixelValue: 1, // 最小的转换单位值
      mediaQuery: false,  // 控制是否允许将媒体查询中的 px 单位进行转换为 vw/vh 单位。
      exclude: [/(\/|\\)(node_modules)(\/|\\)/] // 排除第三方模块中的样式
    }
  }
}

vue——vite

rem

需要的插件

npm i -S amfe-flexible 
根据当前页面的尺寸去设置根元素的font-size
npm install postcss-pxtorem --save
将ps绝对单位转成rem相等单位

在main.js中引入amfe-flexible

import 'amfe-flexible'

vite.config.js中的配置

import postCssPxToRem from 'postcss-pxtorem'
export default defineConfig({
  plugins: [
    vue(),
  ],
  css: {
    postcss: {
      plugins: [
        postCssPxToRem({
          // 自适应，px>rem转换
          rootValue: 37.5,// 75表示750设计稿，37.5表示375设计稿
          propList: ['*'],// 需要转换的属性，这里选择全部都进行转换
          // selectorBlackList:['norem']，// 过滤掉norem-开头的class，不进行rem转换
        }),
      ],
    },
  }
});

vw、vh

需要的插件

npm install postcss-px-to-viewport 

vite.config.js中的配置

import postcsspxtoviewport from "postcss-px-to-viewport";

export default defineConfig({
  plugins: [
    vue(),
  ],
  css: {
    postcss: {
      plugins: [
        postcsspxtoviewport({
          unitToConvert: "px", // 要转化的单位
          viewportWidth: 375, // UI设计稿的宽度
          unitPrecision: 6, // 转换后的精度，即小数点位数
          propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
          viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
          fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
          selectorBlackList: ["ignore-"], // 指定不转换为视窗单位的类名，
          minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
          mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
          replace: true, // 是否转换后直接更换属性值
          landscape: false, // 是否处理横屏情况
        }),
      ],
    },
  }
});