postcss-px-to-viewport
postcss-px-to-viewport copied to clipboard
evrone
postcss-px-to-viewport 限制了最大宽度750px，但是px转测vw后超过最大限制还是会随着屏幕的变大而变大，有没有一个参数是vm参考的最大值，
postcss-px-to-viewport 限制了最大宽度750px，但是px转测vw后超过最大限制还是会随着屏幕的变大而变大，有没有一个参数是vm参考的最大值，
同问题，暂时没找到很好办法，等官网支持吧。 一个临时解决办法：当视口大于某条件后，页面进行缩放 @media screen and (min-width:1200px) { .root-container{ transform: scale(0.5); transform-origin: top; } }
请问一下 现在有好的解决方案吗？
可以试一下我这个插件，postcss-mobile-to-multi-displays，可以设置最大宽度，超过之后就不改变了，也可以设置横屏时的宽度，这个插件的顺序要在 postcss-px-to-viewport 之前。
@wswmsword 这个方案如果css比较多的话，生成的体积太大了
媒体查询的却大了，但是要考虑到媒体查询实际做了桌面端的代码工作，如果重新写一份桌面端代码，同样需要这么多代码。
因为这个原因，所以在目前的版本，我加上了 maxDisplayWidth 参数，这个参数不会用媒体查询生成对应端的代码，只会用到 CSS 函数的 max() 和 min()，相对代码量会少很多。
@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）文件：
