Я хочу отобразить один и тот же набор стилей CSS для людей, печатающих страницу (media = print) и людей, просматривающих мобильный телефон. Есть ли способ объединить CSS-запросы?
Что-то вроде
@media only print or @media only screen and (max-device-width: 480px) {
#container {
width: 480px;
}
}
Разделите их запятой:
@media only print, only screen and (max-device-width: 480px)
См. спецификацию, в частности пример VI (выделено мной):
Несколько медиа-запросов могут быть объединены в список медиа-запросов. список медиа-запросов, разделенных запятыми. Если один или несколько носителей запросы в списке, разделенном запятыми, верны, весь список верен, и в противном случае ложь. В синтаксисе медиа-запросов запятая выражает логическое ИЛИ, в то время как "и ключевое слово выражает логическое И.
Я сомневаюсь, что требуется вторая only, поэтому вы, вероятно, можете сделать:
@media only print, screen and (max-device-width: 480px)
Из https://developer.mozilla.org/en/CSS/Media_queries
Вы можете комбинировать несколько мультимедийных запросов в списке, разделенном запятыми; если любой из медиа-запросов в списке является истинным, связанный стиль лист применяется. Это эквивалент логической операции "или".
Вам просто нужно удалить второй @media и добавить некоторые скобки.