CODEWITHSUNDEEP
iphoneipadcssmedia-queries
copenndthagen
copenndthagen

Reputation: 50742

Can 2 CSS Media Query definition overlap

I am defining multiple CSS Media Queries for different vieqport or device widths...

So my question is can 2 CSS Media Query definition blocks overlap OR only 1st match gets applied. How does it work ?

Also what is the correct method to apply for multiple devices..i mean the order of defining ?

Upvotes: 1

Views: 2335

Answers (2)

tomasdev
tomasdev

Reputation: 5996

It's weird. If you write:

<link media="screen and (max-width: 1250px)" href="/css/small.css" type="text/css" rel="stylesheet" />
<link media="screen and (max-height: 850px)" href="/css/small.css" type="text/css" rel="stylesheet" />

It acts like a XOR (having 2 stylesheets). If both conditions are met (width < 1250 AND height < 850) the stylesheet is not applied. But if you write:

<link media="screen and (max-width: 1250px), screen and (max-height: 850px)" href="/css/small.css" type="text/css" rel="stylesheet" />

It works fine. So comma is the solution for everything.

Upvotes: 0

Jason Gennaro
Jason Gennaro

Reputation: 34855

you can combine multiple media queries in a comma-separated list; if any of the media queries in the list is true, the associated style sheet is applied. This is the equivalent of a logical "or" operation.

https://developer.mozilla.org/en/CSS/Media_queries

So

This is the equivalent of a logical "or" operation

makes it look like only one match is applied.

http://reference.sitepoint.com/css/mediaqueries seems to confirm this as well.

If this is true (and it is untested by me), then I would create a common stylesheet to deliver all the common styles no matter what media query is matched and then have device independent stylesheets with additional styles for each targeted device.

Upvotes: 2

Related Questions