移动端适配之postcss-px-to-viewport

背景

这两天新接手个移动端的项目，之前很少接触过移动端，首当其冲的任务就是如何解决移动端适配的问题，在查阅不少方案后，最终选定这个不错的解决方案 post-css-to-viewport，为什么没有选择rem，主要原因是因为他得算啊，果然懒是人类进步的阶梯。有更好的方案大佬也可以在评论区留个言呀。

在网上找到解决方案是基本是将配置写到postcss.config.js中，但不知为何我写在里面 post-css-to-viewport 就是不生效，最终还是写到 vue.config.js 中，至于写在postcss.config.js为什么不生效，这个下来再探究探究，或者有大佬知道的也可以交流交流。

写在postcss.config.js文件不生效的处理方法已经解决啦！详情可以看补充部分（2022-11-25）

下面附上项目依赖，vue3，@vue/cli 5.0.8

企业微信截图_16692770389634.png

viewport简介

postcss-px-to-viewport它将px转换成视口单位vw，众所周知，vw本质上还是一种百分比单位，100vw即等于100%，即window.innerWidth

在vue项目中引入

在项目中安装插件
```
 yarn add postcss-px-to-viewport -D
```

在vue.config.js配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    // ...
    css: {
      loaderOptions: {
        postcss: {
          postcssOptions: {
            plugins: {
              '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, // 是否处理横屏情况
              },
            },
          },
        },
      },
    },
    // ...
})

重新运行项目，使配置文件生效,已经成功将px转换成vw

兼容第三方UI库

vant团队的是根据375px的设计稿去做的，理想视口宽度为375px,我们要兼容这个就得做些改动，上面配置的exclude去掉，并且修改 viewportWidth,多多余的代码就不写了，只看 postcssOptions 的变化：

module.exports = defineConfig({
    // ...其他代码
    css: {
        loaderOptions: {
            postcss: {
                postcssOptions: (loaderContext) => {
                    return {
                        plugins: {
                          'postcss-px-to-viewport': {
                            viewportWidth: loaderContext.resourcePath.includes('vant') ? 375 : 750,
                            // exclude: /(\/|\\)(node_modules)(\/|\\)/,
                            }
                        }
                    }
                }
            }
        }
    }
    // ...其他代码
}）

补充

今天注意到这里有点问题，内容如下：

INFO Starting development server... [38%] building (146/394 modules) postcss-px-to-viewport: postcss.plugin was deprecated.

处理也很简单：

在项目中安装插件

 yarn add postcss-px-to-viewport-8-plugin -D

将vue.config.js中 postcss-px-to-viewport 改为 postcss-px-to-viewport-8-plugin

或者单独写在postcss.config.js文件中

module.exports = {
   plugins: {
     'postcss-px-to-viewport-8-plugin': {
       viewportWidth: 375,
       // ...
     },
   },
 }

小弟刚开始搞移动端，有错误的地方请大家多多指教。

移动端适配之postcss-px-to-viewport（兼容第三方UI库）

移动端适配之postcss-px-to-viewport

背景

viewport简介

在vue项目中引入

兼容第三方UI库

补充