CSS媒体查询有多慢? [英] How slow are CSS media-queries?

问题描述

组织CSS时，我喜欢完全保留相关样式(页眉样式在一个部分中，页脚样式都在同一位置，等等)(对不起，OOCSS倡导者).

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).

我最近一直在尝试针对较小/较大的屏幕进行媒体查询.为了符合我的组织方案，我必须在代码的每个部分中针对我要定位的每个屏幕尺寸分别添加查询. (因此，例如，如果我要支持七个不同的屏幕尺寸，那么我的页眉" CSS将有七个媒体查询，然后在页脚"部分中将有七个查询，等等.)

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.)

撇开我是否应该这样做的问题，有那么多媒体查询块有什么技术影响吗? (它们都是min-width，max-width或两者都有.假设我有100个不同的查询，但是我要一遍又一遍地检查七个不同的大小.)浏览器解析起来是否需要更长的时间?

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?

推荐答案

在现代浏览器中，对潜在慢速路径的代码进行了优化，因此除非确实需要，否则您无需预先优化此类操作，带有手边的分析数据.继续写吧.

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.

这篇关于CSS媒体查询有多慢?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！