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

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

Что-то вроде

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

     #container {
         width: 480px;
     }
}

Ответы

Ответ 1

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

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

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

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

Я сомневаюсь, что требуется вторая only, поэтому вы, вероятно, можете сделать:

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

Ответ 2

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

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

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