Как объединить несколько «групп» медиазапросов CSS? - PullRequest
Новая
       43

Как объединить несколько «групп» медиазапросов CSS?

0 голосов
/ 03 июля 2019

В медиа-запросах CSS вы можете использовать , (для «или») и and для соответствия требованиям медиа-запроса. Например: 

@media (min-width: 768px) and (min-resolution: 2dppx) { ... }

Но что, если вы хотите смешать and и , в одном медиа-запросе? Хорошим вариантом использования было бы то, что min-resolution поддерживается не во всех браузерах. Вы должны сделать что-то вроде этого: 

@media
(-webkit-min-device-pixel-ratio: 2),
(min-device-pixel-ratio: 2),
(min-resolution: 192dpi),
(min-resolution: 2dppx) { ... }

В этом случае ЛЮБЫЕ из этих требований должны совпадать, чтобы медиа-запрос вступил в силу.

Итак, если бы я хотел также указать min-width: 768px в медиа-запросе, как бы я это сделал? Можно ли сгруппировать запросы "или" вместе и отделить группу с помощью and? Примерно так: 

@media
(
  (-webkit-min-device-pixel-ratio: 2),
  (min-device-pixel-ratio: 2),
  (min-resolution: 192dpi),
  (min-resolution: 2dppx)
)
and
(min-width: 768px) { ... }

Приведенный выше синтаксис не работает, но я думаю, что он, возможно, иллюстрирует то, что я пытаюсь получить. Это было бы похоже на то, как вы группируете SQL AND и OR запросы вместе, используя (...) круглые скобки.

Возможно ли это сделать с помощью CSS?

EDIT:

Кажется, что это работает, но похоже на синтаксический перебор: 

@media
  (-webkit-min-device-pixel-ratio: 2) and (min-width: 768px),
  (min-device-pixel-ratio: 2) and (min-width: 768px),
  (min-resolution: 192dpi) and (min-width: 768px),
  (min-resolution: 2dppx) and (min-width: 768px)
  { ... }

Это единственный способ сделать это?

1 Ответ

0 голосов
/ 03 июля 2019

Попробуйте использовать его следующим образом: 

@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) and (min-width: 768px) {...}

, интерпретируется как разделитель в списке одиночных медиазапросов, в основном это означает, что сначала оценивается каждый медиазапрос между запятыми, а затем всеиз них ИЛИ объединяются, что дает , / ИЛИ самый низкий приоритет.

and имеет самый высокий приоритет

...