移动端元素根据屏幕自适应——postcss-px-to-viewport 插件

移动端元素根据屏幕自适应——postcss-px-to-viewport 插件

postcss-px-to-viewport是一个插件，作用是根据配置将css样式中的px转为vw，配置响应式元素给每个不同的设备

本文借鉴了: https://www.cnblogs.com/zhangnan35/p/12682925.html

 

安装

npm install postcss-px-to-viewport

 

使用

Vue中使用

在项目根目录下添加一个.postcssrc.js文件

module.exports = {
  plugins: {
    autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
    "postcss-px-to-viewport": {
      unitToConvert: "px", // 要转化的单位
      viewportWidth: 750, // UI设计稿的宽度
      unitPrecision: 6, // 转换后的精度，即小数点位数
      propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
      viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
      fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
      selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，
      minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
      mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
      replace: true, // 是否转换后直接更换属性值
      exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
      landscape: false // 是否处理横屏情况
    }
  }
};

 

React中使用

引入

import pxtoviewport from 'postcss-px-to-viewport';

使用

export default defineConfig({
  plugins: [react()],
  css: {
    postcss: {
      plugins: [
        // 适配不同的设备
        pxtoviewport({
           unitToConvert: 'px', // 要转换的单位
          viewportWidth: 375, // 视图的宽度（设计稿的宽度）
          unitPrecision: 5, // 转换后的精度，保留多少位小数
          propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
          viewportUnit: 'vw', // 转换后的单位
          fontViewportUnit: 'vw',
          selectorBlackList: [],
          minPixelValue: 1, // 转换的最小值（1px其实也会转换）
          mediaQuery: false,
          replace: true,         
          exclude: undefined,//设置忽略文件，用正则做目录名匹配
          include: undefined,//设置包含文件，用正则做目录名匹配
          landscape: false,// 是否处理横屏情况
          landscapeUnit: 'vw',//横屏单位
          landscapeWidth: 568 //横屏的宽度
        })
      ]}}})