Может ли 2 определение CSS Media Query перекрываться

Question

Я определяю несколько CSS Media Queries для разных vieqport или устройств разной ширины ...

Так что мой вопрос: могут ли два блока определения Media Media Query CSS перекрываться ИЛИ применяется только первое совпадение?Как это работает?

Кроме того, каков правильный метод для нескольких устройств? Я имею в виду порядок определения?

Answer 1

вы можете объединить несколько медиа-запросов в список через запятую; если любой из медиа-запросов в списке - это правда, связанный стиль лист прилагается. Это эквивалент логической операции «или».

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

So

Это эквивалент логической операции "или"

выглядит так, будто применяется только одно совпадение.

http://reference.sitepoint.com/css/mediaqueries, кажется, также подтверждает это.

Если это так (и я не тестировал его), то я бы создал общую таблицу стилей для доставки всех общих стилей независимо от того, какой медиа-запрос сопоставлен, а затем имел бы независимые от устройства таблицы стилей с дополнительными стилями для каждого целевого устройства.

Answer 2

Это странно.Если вы напишите:

<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" />

Он действует как XOR (имеет 2 таблицы стилей).Если выполняются оба условия (ширина <1250 И высота <850), таблица стилей не применяется.Но если вы напишите: </p>

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

Работает нормально.Так что запятая - это решение для всего.