关于postcss-px-to-viewport的使用经验

最近在工作项目使用中新接触到postcss-px-to-viewport，在使用上遇到一个坑，也有段时间没更新啦，记录分享一下~希望对你有所帮助！

直接上重点，节省在网站苦苦寻找有效答案的你 >>>

我所遇到的坑：

由于项目需要，需要适配不同分辨率的终端设备，比如我接到的项目需求是1920*1080以及1200*1920；如果使用过postcss-px-to-viewport的话，我们知道适配一种尺寸在配置时设置viewportWidth就可以，那如果适配两种呢？

一开始我想到的是我们常用的@media screen and （max-width: 1200px）去做兼容，但真正使用后会发现这样字体大小是不能够适配的，那有什么办法能同时适配两种分辨率的终端呢，当终端尺寸差距比较大的情况？

然后我们去查配置postcss-px-to-viewport的api，非常幸运且惊喜的是api里提供了第二种真对适配landscapeWidth，于是我们这样配置，

const pxtoviewport = require("postcss-px-to-viewport");

module.exports = {
  css: {
    loaderOptions: {
      //配置路vw vm适配
      postcss: {
        plugins: [
          pxtoviewport({
            viewportWidth: 1200,
            mediaQuery: true,
            landscape: true,
            landscapeWidth: