Я пытаюсь скрыть медиа-запрос от печати, поэтому придумал @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» (что иногда приводит к тому, что значение будет установлено на начальное значение), «наследовать» или что-то в этом роде.
initial имеет худшую поддержку, чем медиа-запросы или медиа-тип print, поэтому в некоторых браузерах min-width может оставаться 732px — будьте осторожны!
- person BoltClock; 16.05.2012
Грамматика медиазапросов, мягко говоря, довольно ограничена.
Но с CSS3 (не CSS2.1) кажется, что вы можете вложить @media правила.
@media not print {
@media (min-width:732px) {
...
}
}
Это в основном выполняется как (not print) and (min-width:732px).
См. https://stackoverflow.com/a/11747166/3291457 для получения дополнительной информации.
Если я прав в своих предположениях об ожидаемом поведении, проблема в том, что приоритет not ниже, чем and.
@media not print and (min-width:732px) означает «любой носитель, кроме принтеров с окном просмотра шириной не менее 732 пикселей» (поэтому он будет применяться к любым принтерам, не предназначенным для печати, и тонким принтерам), а не «любой носитель, кроме принтеров, если этот носитель имеет окно просмотра шириной не менее 732 пикселей». (именно этого, я полагаю, вы и ожидали).
Поскольку круглые скобки недействительны для типов мультимедиа, а правила @media не могут быть вложенными, работа с ними немного раздражает. Для простых случаев brentonstrine answer является хорошим решением, но для запросов, которые включают в себя множество стилей, может быть обременительно убедиться, что они все переопределены должным образом.
Я собрал несколько примеров медиа-запросов, когда сегодня пытался разобраться в этом сам.
@import с медиа-запросом или атрибутом media в элементе <link> и включив дочерние правила @media (или дополнительные @import) в CSS.
- person Matt Kantor; 06.08.2012
Как вы не можете поставить что-то вроде этого
@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 { ... }
not print не работает?
- person cyreb7; 15.05.2012
Приведенный выше вложенный запрос не сработал у меня, но после небольшого чтения Типы медиазапросов в MDN, вы можете исключить свой медиазапрос из стилей печати, указав тип screen
Поэтому, если у вас есть подобный медиа-запрос, в котором не указан тип, он будет иметь подразумеваемый тип all (что повлияет на стили печати).
@media (min-width:400px) {
...
}
Чтобы исключить стиль из стилей печати, вам нужно изменить его на это:
@media screen and (min-width:700px) {
...
}
not print, и поэтому не применяют ни один из стилей внутри медиа-запросаmax-width. - person Chadwick Meyer schedule 13.11.2014