在将我的主要css重构为模块化方法时，我正在使用@media all {}来在IDE中包装css模块。这种方法使得扫描文件内容变得更加容易，因为我们现在无法使用像less或sass这样的预处理器。
我唯一担心的是所有这些媒体查询（每个css模块/一组相干选择器一个）可能会在渲染网站时导致性能损失。我不关心我们的css文件的文件大小，因为这是一个小问题，具有纤薄的模块化CSS框架和适当的压缩。
像@media all {}这样的媒体查询是否会影响性能（桌面和移动/其他）设备（如果经常使用）？
答案 0 :(得分：2)
答案是否定的......是的。拥有大量媒体查询不会使网站更难渲染。但是更多行代码会使文件变大，从技术上讲加载时间会更长。这仍然不是一个性能影响。
但是在调整浏览器大小时，浏览器会重新计算一堆不同的mq设置。在此处阅读更多内容：Web Performance: One or thousands of Media Queries?
但是......如果你想积极主动地使用预处理器，只需使用Pleeease即可。 Pleeease为您提供类似于vanilla css的预处理能力。它提供了一个名为mqpacker的PostProcessor函数。它将在您的样式表中找到所有类似的媒体查询，并将它们合并到相关的媒体查询中。但同样，如果您在服务器上压缩样式表，则不必担心它。
祝你好运！保持棒极了！