CSS 媒体查询有多慢？
当我组织 CSS 时，我喜欢将相关样式保留在一起（页眉样式位于一个部分，页脚样式全部位于同一位置，等等）（抱歉，OOCSS 拥护者）。
我最近一直在尝试针对较小/较大屏幕的媒体查询。为了与我的组织方案保持一致，我必须为代码的每个部分所针对的每个屏幕尺寸添加单独的查询。 （例如，如果我支持七种不同的屏幕尺寸，我将使用“页眉”CSS 进行七个不同的媒体查询，然后在“页脚”部分中使用七个查询，等等。
）我是否应该这样做，拥有如此多的媒体查询块是否会产生任何技术影响？ （它们都是 min-width、max-width 或两者兼而有之。假设我有 100 个不同的查询，但我只检查了 7 个不同的尺寸一遍又一遍。）浏览器会花费更长的时间来解析吗？
When I organize my CSS, I like to keep related styles altogether (header styles are in one section, footer styles are all in the same place, etc.) (sorry, OOCSS advocates).
I've recently been experimenting with media queries for smaller/larger screens. To keep with my organizational scheme, I would have to include separate queries for each screen size I'm targeting with each section of the code. (So, for example, if I was supporting, like, seven different screen sizes, I would have seven different media queries with my "header" CSS, and then seven queries in the "footer" section, etc.)
Leaving aside the question of whether or not this is how I should do it, are there any technical ramifications to having so many blocks of media queries? (They're all either min-width, max-width, or both. Say I had 100 different queries, but there are only seven distinct sizes I'm checking over and over again.) Would it take the browser longer to parse?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
处理潜在慢速路径的代码在现代浏览器中得到了大力优化，因此您不需要预先优化此类事情，除非您确实需要这样做，并且手头有分析数据。继续写吧。
The code handling potentially slow paths is heavily optimized in modern browsers, so you don't need to pre-optimize this kind of things unless you definitely have to, with the profiling data at hand. Go ahead and write it.