Я пытаюсь скрыть медиа-запрос от печати, поэтому я придумал @media not print and (min-width:732px). Но по какой-то причине этот (и многие варианты, которые я пробовал) не отображается, как я ожидал бы в браузерах.
Единственный вариант, о котором я могу думать, это использовать @media screen and (max-width:732px), но я хотел бы избежать этого, поскольку он исключает все другие типы носителей помимо экрана.
Как насчет чего-то подобного?
body { min-width:732px; }
@media print {
body { min-width:initial; }
}
Минимальная ширина будет равна 732 для всего, кроме печати, которая получит другое значение, которое вы укажете. В зависимости от вашей ситуации вы можете установить другую ширину или попробовать что-то вроде "thiswontwork" (что иногда приводит к тому, что значение будет установлено на начальное значение) или "наследовать" или что-то в этом роде.
Глоссарий запросов к средствам массовой информации довольно ограничен, по меньшей мере.
Но с CSS3 (не CSS2.1) кажется, что вы можете вложить правила @media.
@media not print {
@media (min-width:732px) {
...
}
}
В основном это выполняется как (not print) and (min-width:732px).
Подробнее см. fooobar.com/questions/104514/....
Если я прав в своих предположениях о поведении, которое вы ожидали, проблема в том, что приоритет not ниже and.
@media not print and (min-width:732px) означает "любые носители, за исключением принтеров с видовыми экранами не менее 732 пикселей" (поэтому он будет применяться к любым принтерам, не использующим принтер и тощий), а не "любые носители, кроме принтеров", если этот носитель имеет как минимум в окне просмотра размером 732 пикселей "(что, как я полагаю, ожидалось).
Так как скобки недействительны в отношении типов носителей, а правила @media не могут быть вложенными, работа вокруг этого раздражает. Для простых случаев brentonstrine answer является хорошим решением, но для запросов, которые охватывают многие стили, это может быть обременительным, чтобы убедиться, что все они правильно переопределены.
Я собрал некоторые примерные медиа-запросы, когда я пытался понять это раньше сегодня.
Как вы не можете поместить что-то вроде этого
@media screen,handheld,projection,tv,tty and (max-width:732px) { ... }
вы должны писать пары для каждого носителя, например:
@media screen and (max-width:732px), handheld and (max-width:732px), projection and (max-width:732px), tv and (max-width:732px), tty and (max-width:732px) { ... }
Вы можете попробовать что-то вроде:
@media screen,handheld,projection,tv,tty { ... }