What are the rules for CSS media query overlap?

Question

How do we space out media queries accurately to avoid overlap?

For example, if we consider the code:

@media (max-width: 20em) {
    /* for narrow viewport */
}

@media (min-width: 20em) and (max-width: 45em) {
    /* slightly wider viewport */
}

@media (min-width: 45em) {
    /* everything else */
}

What will happen, across all supporting browsers, at exactly 20em, and 45em?

I've seen people use: things like 799px and then 800px, but what about a screen width of 799.5 px? (Obviously not on a regular display, but a retina one?)

I'm most curious about the answer here considering the spec.

Your current question title doesn't seem to match what you're asking. It seems like the first line of your question content would fit better as the title :) — BoltClock, Nov 28 '12 at 17:35
@BoltClock, thanks as always — I switched them around; but how did you interpret "spacing out media queries"? — Baumr, Nov 28 '12 at 17:39
guess @media (...) is less or equal, and greater or equal. you'd better use pixels for max-width — , Nov 28 '12 at 17:40
@Baumr: Good question - I don't quite fully understand what you mean by that, actually. The rest of the question I understand and I'm writing an answer. — BoltClock, Nov 28 '12 at 17:42
@BoltClock, ah, I can see why. For lack of a better word, I was using 'space out' more or less as an antonym of 'overlap' — Baumr, Nov 28 '12 at 17:45
I would assume that if you had a width of exactly 20em, then it would first apply the `max-width: 20em` definitions, then also apply the `min-width: 20em` definitions. — jeffjenx, Nov 28 '12 at 17:46
@cyril, but you added a 10px gap between each media query — obviously it'll have no background. So you've illustrated that as bad (if not intended). But excessive overlap could also be bad. — Baumr, Nov 28 '12 at 17:46
@MrSlayer, makes sense, but what would the spec say? (And what would different browsers do in reality is something else I'm now curious about.) — Baumr, Nov 28 '12 at 17:48
@Baumr, I believe it is just cascading the same as general CSS declarations. Since a width of 20em satisfies both queries, both of the query definitions are going to be applied. — jeffjenx, Nov 28 '12 at 17:56

score 125 · Accepted Answer · edited May 23 '17 at 12:34

What are the rules for CSS media query overlap?

Cascade.

@media rules are transparent to the cascade, so when two or more @media rules match at the same time, the browser should apply the styles in all the rules that match, and resolve the cascade accordingly.¹

What will happen, across all supporting browsers, at exactly 20em, and 45em?

At exactly 20em wide, your first and second media query will both match. Browsers will apply styles in both @media rules and cascade accordingly, so if there are any conflicting rules that need to be overridden, the last-declared one wins (accounting for specific selectors, !important, etc). Likewise for the second and third media query when the viewport is exactly 45em wide.

Considering your example code, with some actual style rules added:

@media (max-width: 20em) {
    .sidebar { display: none; }
}

@media (min-width: 20em) and (max-width: 45em) {
    .sidebar { display: block; float: left; }
}

When the browser viewport is exactly 20em wide, both of these media queries will return true. By the cascade, display: block overrides display: none and float: left will apply on any element with the class .sidebar.

You can think of it as applying rules as if the media queries weren't there to begin with:

.sidebar { display: none; }
.sidebar { display: block; float: left; }

Another example of how the cascade takes place when a browser matches two or more media queries can be found in this other answer.

Be warned, though, that if you have declarations that don't overlap in both @media rules, then all of those rules will apply. What happens here is a union of the declarations in both @media rules, not just the latter completely overruling the former... which brings us to your earlier question:

How do we space out media queries accurately to avoid overlap?

If you wish to avoid overlap, you simply need to write media queries that are mutually exclusive.

Remember that the min- and max- prefixes mean "minimum inclusive" and "maximum inclusive"; this means (min-width: 20em) and (max-width: 20em) will both match a viewport that is exactly 20em wide.

It looks like you already have an example, which brings us to your last question:

I've seen people use: things like 799px and then 800px, but what about a screen width of 799.5 px? (Obviously not on a regular display, but a retina one?)

This I'm not entirely sure; all pixel values in CSS are logical pixels, and I've been hard pressed to find a browser that would report a fractional pixel value for a viewport width. I've tried experimenting with some iframes but haven't been able to come up with anything.

From my experiments it would seem Safari on iOS rounds all fractional pixel values to ensure that either one of max-width: 799px and min-width: 800px will match, even if the viewport is really 799.5px (which apparently matches the former).

¹ _{Although none of this is explicitly stated in either the Conditional Rules module or the Cascade module (the latter of which is currently slated for a rewrite), the cascade is implied to take place normally, since the spec simply says to apply styles in any and all @media rules that match the browser or media.}

@Baumr: No problem, although I wasn't quite done yet - I'd missed your question about overlapping media queries. I've updated my answer, and with that I'm calling it a night. Oh and just for kicks: media queries are one of my favorite topics in CSS, but I can't stand the term RWD ;) — BoltClock, Nov 28 '12 at 18:19
BoltClock, it may have been the first time I used "RWD" actually — your cold reception has been noted, haha! Good night, but when you return, check out the update I made to the original question. Now to look at your update... — Baumr, Nov 28 '12 at 18:37
BoltClock, should I take out that update and make it into its own question? I feel I am making this convoluted — Baumr, Nov 28 '12 at 18:47
BoltClock: I took it out and put it into a, hopefully, more concise question: [How to avoid media query overlap?](http://stackoverflow.com/questions/13634326/how-to-avoid-media-query-overlap#comment18702690_13634326) — if you have any edit suggestions to make it more applicable to other people, please do share. **P.S. It's not letting me @ you in the comments.** — Baumr, Nov 29 '12 at 22:35
@Baumr: That's because we're the only two users commenting here. Since this answer is mine, I'm always notified of your comments. For some reason, the system thinks you shouldn't have to @ me because of that. — BoltClock, Nov 30 '12 at 04:04
Ah, makes sense. Regarding the other question — someone suggested something in the comments you might be interested in (rounding of `em` and computation thereof). — Baumr, Nov 30 '12 at 14:26
I found this question when I noticed that my page elements in IE11 were flickering when changing browser width. Further investigation showed that at one particular browser width, elements were not styled at all. My rules didn't overlap: there was a 1 pixel difference (one rule was 960, the next 961). Since my rules were the same in each set, making the second rule start at 960 resulted in proper styling behaviour, since the second set overrode the first. (Full disclosure: this was on a SharePoint site designed for IE11, your own mileage may vary) — Squishy, Jan 30 '14 at 11:07
from my experience, max-width is not inclusive. eg. max-width: 768px only applies your styles up to 767px — Wassim Katbey, Apr 09 '22 at 13:51
@Lybelle Katbey: Then you probably have a min-width: 768px somewhere that's overriding it. — BoltClock, Apr 11 '22 at 09:00

score 13 · Answer 2 · answered Sep 21 '18 at 15:18

I have tried as recommended here:

@media screen and (max-width: calc(48em - 1px)) {
    /*mobile styles*/
}
@media screen and (min-width: 48em) {
    /*desktop styles*/
}

but found that this was not a good idea because it does not work on Chrome right now either on my Ubuntu desktop or on my Android phone. (as explained here: calc() not working within media queries) But, I found a better way...

@media screen and (max-width: 47.9999em) {
    /*mobile styles*/
}
@media screen and (min-width: 48em) {
    /*desktop styles*/
}

and bam!

This should be the accepted answer. BoltClock supplied the pedantic answer, but this answer is the most useful! — John Henckel, Aug 11 '19 at 23:31

Milche Patern · Answer 3 · 2016-09-20T23:03:08.157

2

calc() can be use to work around this (min-width: 50em and max-width: calc(50em - 1px) will be correctly stacked), but poor browser support and i would not recommending it.

@media (min-width: 20em) and (max-width: calc(45em - 1px)) {
    /* slightly wider viewport */
}

Infos:

Some others mentioned, not using the em unit would help in your queries stacking.

edited Sep 20 '16 at 23:03

answered Dec 12 '12 at 19:12

Milche Patern

19,632
6
35
52

8

`calc()` is not a part of the media query spec and will not work. – Jason Sep 10 '16 at 08:39

score -1 · Answer 4 · answered Aug 03 '22 at 11:43

If you only have two states it is possible to use the not operator:

@media (max-width: 20em) {
    html { background-color: red; }
}

@media not all and (max-width: 20em) {
    html { background-color: blue; }
}

Note: You need to have all in the query to use not.

Note: not will negate the whole query regardless of parentesens, see: Inverting a query's meaning

What are the rules for CSS media query overlap?

4 Answers4

Linked