Объединение CSS медиа-запросов

Question

Я хочу отображать один и тот же набор стилей CSS для людей, печатающих страницу (media = print) и людей, просматривающих на мобильном телефоне. Есть ли способ объединить медиа-запросы CSS?

Что-то вроде

@media only print or @media only screen and (max-device-width: 480px) {
  #container {
    width: 480px;
  }
} 

Answer 1

Разделите их запятой:

@media only print, only screen and (max-device-width: 480px)

См. Спецификацию , в частности, пример VI (выделение добавлено):

Несколько медиа-запросовможет быть объединен в списке медиа-запросов.Разделенный запятыми список медиазапросов.Если один или несколько медиа-запросов в списке через запятую имеют значение true, весь список имеет значение true, а в противном случае - false.В синтаксисе медиазапросов запятая выражает логическое ИЛИ , а ключевое слово 'и' выражает логическое И.

Я сомневаюсь, что необходим второй only,так что вы, вероятно, можете сделать:

@media only print, screen and (max-device-width: 480px)

Answer 2

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

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

Вам просто нужно удалить вторую @media и добавить несколько скобок.