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 ?

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.

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.