vue 配置移动单位转换插件 postcss-px-to-viewport

最新推荐文章于 2024-09-13 22:21:29 发布

weixin_44112924

最新推荐文章于 2024-09-13 22:21:29 发布

阅读量2.3k

点赞数 1

分类专栏：移动端踩坑总结文章标签： vue3.0移动端适配

原文链接：https://cloud.tencent.com/developer/article/1491489

版权

移动端踩坑总结专栏收录该内容

2 篇文章 0 订阅

订阅专栏

vue3.0 配置移动单位转换插件 postcss-px-to-viewport

在vue.config.js文件中配置：

css: {
        loaderOptions: {
          postcss: {
            plugins: [
              require("postcss-px-to-viewport")({
                unitToConvert: "px",
                viewportWidth: 750,
                // viewportHeight: 1334,
                unitPrecision: 3,
                propList     : [
                  "*"
                ],
                viewportUnit     : "vw",
                fontViewportUnit : "vw",
                selectorBlackList: ['vux','weui'],
                minPixelValue    : 1,
                mediaQuery       : false,
                replace          : true,
                exclude          : /(\/|\\)(node_modules)(\/|\\)/,
              })
            ]
          }
        }
      },

配置项:


{
                      // 需要转换的单位，默认为"px"
                      unitToConvert: 'px',
                      
                      // 设计稿的视口宽度, 将根据视口做比例换算
                      viewportWidth: 750,
                      
                      // 转化精度，转换后保留位数
                      unitPrecision: 2,
                      
                      // 能转化为vw的属性列表
                      propList: [],
                      
                      // 希望使用的视口单位
                      viewportUnit: 'vw',
                      
                      // 字体使用的视口单位
                      fontViewportUnit: 'vw',
                      
                      // 需要忽略的CSS选择器
                      selectorBlackList: [],
                      
                      // 最小的转换数值
                      minPixelValue: 1,
                      
                      // 媒体查询里的单位是否需要转换单位
                      mediaQuery: true,
                      
                      // 转换后是否添加备用单位
                      replace: true,
                      
                      // 忽略文件目录
                      exclude: ['node_modules'],
                      
                      // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
                      landscape: false,
                      
                      // 横屏时使用的单位
                      landscapeUnit: 'vh',
                      
                      // 横屏时使用的视口宽度
                      landscapeWidth: 1334
                  }