postcss-px-to-viewport 限制了最大宽度750px，但是px转测vw后超过最大限制还是会随着屏幕的变大而变大，有没有一个参数是vm参考的最大值，

[Dodo703]

postcss-px-to-viewport 限制了最大宽度750px，但是px转测vw后超过最大限制还是会随着屏幕的变大而变大，有没有一个参数是vm参考的最大值，

[rowthan]

同问题，暂时没找到很好办法，等官网支持吧。 一个临时解决办法：当视口大于某条件后，页面进行缩放 @media screen and (min-width:1200px) { .root-container{ transform: scale(0.5); transform-origin: top; } }

[yangfan-coder]

请问一下 现在有好的解决方案吗？

[gjincai]

同问附议

[Bobyoung0719]

附议

[IvenBao]

臣附议

[frank-pian]

附议

[kubixiaoguo]

同等

[yilidan]

同等

[baixiaoyu2997]

用rem吧 root font-size设置为百分比，超过最大宽度时，再设置root font-size为固定值

[wswmsword]

请问一下 现在有好的解决方案吗？

可以试一下我这个插件，postcss-mobile-to-multi-displays，可以设置最大宽度，超过之后就不改变了，也可以设置横屏时的宽度，这个插件的顺序要在 postcss-px-to-viewport 之前。

[imgss]

@wswmsword 这个方案如果css比较多的话，生成的体积太大了

[wswmsword]

@wswmsword 这个方案如果css比较多的话，生成的体积太大了

媒体查询的却大了，但是要考虑到媒体查询实际做了桌面端的代码工作，如果重新写一份桌面端代码，同样需要这么多代码。

因为这个原因，所以在目前的版本，我加上了 maxDisplayWidth 参数，这个参数不会用媒体查询生成对应端的代码，只会用到 CSS 函数的 max() 和 min()，相对代码量会少很多。

[wswmsword]

@imgss postcss-mobile-forever 3.1.0 版本加入了 extract 选项，打开后会分割样式，提取为桌面端、横屏和移动端文件，这样主包的体积会减小。可以配合 splitChunks 选项优化打包：

module.exports = {
  // ...其它配置
  optimization: {
    splitChunks: {
      cacheGroups: {
        desktop: {
          chunks: "all",
          enforce: true,
          test: /desktop[^\\/]*?\.css$/,
          name: "desktop",
          priority: 101,
        },
        landscape: {
          chunks: "all",
          enforce: true,
          test: /landscape[^\\/]*?\.css$/,
          name: "landscape",
          priority: 102,
        },
        mobile: {
          chunks: "all",
          enforce: true,
          test: /mobile[^\\/]*?\.css$/,
          name: "mobile",
          priority: 103,
        },
      }
    }
  },
}

下面的图片展示了 html 文件里引入的三个被提取的桌面端（desktop.css）、横屏（landscape.css）和移动端（mobile.css）文件：

[vickiwu]

臣附议，等好的解决方案

[eric-gitta-moore]

@imgss postcss-mobile-forever 3.1.0 版本加入了 extract 选项，打开后会分割样式，提取为桌面端、横屏和移动端文件，这样主包的体积会减小。可以配合 splitChunks 选项优化打包：

module.exports = {
  // ...其它配置
  optimization: {
    splitChunks: {
      cacheGroups: {
        desktop: {
          chunks: "all",
          enforce: true,
          test: /desktop[^\\/]*?\.css$/,
          name: "desktop",
          priority: 101,
        },
        landscape: {
          chunks: "all",
          enforce: true,
          test: /landscape[^\\/]*?\.css$/,
          name: "landscape",
          priority: 102,
        },
        mobile: {
          chunks: "all",
          enforce: true,
          test: /mobile[^\\/]*?\.css$/,
          name: "mobile",
          priority: 103,
        },
      }
    }
  },
}

下面的图片展示了 html 文件里引入的三个被提取的桌面端（desktop.css）、横屏（landscape.css）和移动端（mobile.css）文件：

支持此方案🫡🫡