Media print css не работает

не работает @media в css

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Не работает команда @media в CSS
Добрый день. Подскажите пожалуйста где ошибка. Цель, хочу чтобы при просмотре сайта через.

Разница между @media и атрибутом media в CSS
Доброго времени суток! Очень каноничный ламер, буквально 2 дня назад начал читать про разметку.

Media screen css
Ребят, подскажите. Как сделать, если media screen = значению, которому указывал, он загружал.

Media запрос CSS
Всем привет! Делаю адаптивную версиб сайта (под мобилы), возникла проблемма. Основной CSS .

vlad_fom,

увы и такая запись не работает.

Добавлено через 1 минуту
evikza, увы и этот вариант не проходит. пробовал.

Решение

vlad_fom, ну как же не работает?

С вашим @media запросом, правила работать не будут:

Если сделать как я показал, все отлично работает

vlad_fom, ну как же не работает?

С вашим @media запросом, правила работать не будут:

Если сделать как я показал, все отлично работает

Css media queries
Добрый день.Помогите пожалуйста разобраться.Есть ли причина по которой в css нужно использовать как.

Media css не подключаются к android
Уже не знаю в чем проблема, в хроме в панели разработчика проверил, все работает, но через телефон.

CSS и принтер (@media правила)
Здравствуйте. У меня такой вопрос: необходимо сделать страничку, работающую с @media правилами, то.

@Media CSS Как убрать блок из header?
Всем привет. Возникла проблема с сайтом . У меня в шапке есть логотип,»поддержка»,»жалоба»,и.

Источник

@media print не работает должным образом в Chrome

Нашли/прочитали / попробовали много ответов на этот вопрос, так что извините, если решение уже было опубликовано, но Chrome не отображает стили печати правильно со многими элементами отсутствует (но не все).

Вот как все устроено.

1. SETUP

Стили печати задаются в конце основного css файла с помощью @media print

На ссылке нет атрибута media, который загружает css-файл

Мы объявляем !important на всех стили печати

Стили печати переопределяют стили экрана там, где это необходимо (т. е. @media screen

Эмуляция печати в Chrome Dev tools отлично отображает стили печати

Но некоторые элементы исчезают при печати (и / или печати в PDF)

Проблема возникает при использовании кнопки print HTML или «печать» из файла меню

Эта проблема не возникает в Firefox или Safari

2. УСТРАНЕНИЕ НЕПОЛАДОК

Стили печати были завернуты в @media only print <>

Поэтому попытался удалить ‘только’, как это @media print <> , но никакой разницы

Если я неправильно перемещаю ‘только’, чтобы быть после «print», как это @media print only <>

Затем некоторые из отсутствующих элементов печати отображаются, но другие исчезают

Как отмечалось в другом месте, попробовал этот хак в начале стилей печати, но нет удача

Любая помощь или предложения будут приветствоваться.

1 ответ:

Эта проблема вызвана объявлением CSS display: inline-block в вашем основном классе content container, presenter-notes__main-content .

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

Итак, что происходит, когда у вас есть элемент, который слишком велик, чтобы поместиться на одной странице, но не может быть разделен на несколько страниц? Бред какой-то, вот что! Конечно, некоторые браузеры могут изящно деградировать и просто обрезать переполнение, но другие могут запутаться и вообще удалить элемент. Компьютеры не очень хорошо справляются с парадоксами.

Источник

Почему мои медиа-запросы CSS3 не работают?

В файле styles.css я использую медиазапросы, в обоих из которых используется вариант:

Когда я уменьшаю окно, сайты меняют размер до нужного мне макета в обычном браузере (Safari, Firefox), однако макет мобильного телефона вообще не отображается на телефоне. Вместо этого я просто вижу CSS по умолчанию.

Может кто-то указать мне верное направление?

Все три из них были полезными советами, но, похоже, мне нужно было добавить метатег:

Теперь все работает на Android (2.2) и iPhone .

Не забудьте иметь стандартные объявления CSS над медиа-запросом, иначе запрос также не будет работать.

Я подозреваю, что ключевое слово only может быть проблемой здесь. У меня нет проблем с использованием медиа-запросов, как это:

@media screen and (max-width: 480px)

Я использовал загрузчик на пресс-сайте, но он не работал на IE8, я использовал css3-mediaqueries.js javascript, но все еще не работал. если вы хотите, чтобы ваш медиа-запрос работал с этим файлом javascript, добавьте экран в строку медиа-запроса в css

css Линия связи такая же простая, как и над строкой

Сегодня у меня была похожая ситуация. Медиа-запрос не работает. Через некоторое время я обнаружил, что пробел после «и» пропал. Правильный медиа-запрос должен выглядеть так:

Последовательный порядок кода CSS также имеет значение, например:

приведенный выше код не будет работать, потому что выполнен заказ. Нужно написать следующим образом:

Всегда упоминайте max-width и min-width в некоторых единицах, таких как px или rem. Это понял для меня. Если я напишу это без единицы и только числового значения, браузер не сможет прочитать медиа-запросы. пример: это неправильный экран @media only и (max-width: 950) и правильный экран @media only и (max-width: 950px)

Бросив еще один ответ в кольцо. Если вы пытаетесь использовать переменные CSS, то это тихо завершится неудачей.

Переменные CSS не работают в медиа-запросах (по замыслу).

Странная причина, которую я никогда раньше не видел: если вы используете селектор «родитель> потомок» вне медиазапроса (в Firefox 69), это может нарушить медиазапрос. Я не уверен, почему это происходит, но для моего сценария это не сработало .

Но добавление родителя, чтобы он соответствовал другому CSS дальше по странице, это работает .

Похоже, указание родителя не должно иметь значения, поскольку идентификатор очень специфичен и не должно быть никакой двусмысленности. Может быть, это ошибка в Firefox?

Фрагмент кода OP явно использует правильную разметку комментария, но CSS может прогрессировать постепенно — поэтому, если есть синтаксическая ошибка, все после этого может потерпеть неудачу. Пару раз я полагался на заслуживающие доверия источники, которые предоставили неправильную разметку комментариев, которая сломала мою таблицу стилей. Так как ОП предоставил лишь небольшой раздел их кода, я бы предложил следующее:

Убедитесь, что все ваши комментарии CSS используют эту разметку /* . */ — которая является правильной разметкой комментариев для CSS согласно MDN

Подтвердите свою CSS с помощью линтера или безопасного онлайн-валидатора. Вот один из W3

Больше информации: я пошел, чтобы проверить последние рекомендованные точки останова медиазапроса с начальной загрузки 4, и закончил копированием пластины котла прямо из их документов. Почти каждый блок кода был помечен комментариями в стиле javascript // , что нарушало мой код — и давало мне только загадочные ошибки компиляции, с которыми приходилось устранять неполадки, которые в тот момент вызывали у меня головокружение.

Текстовый редактор IntelliJ позволил мне закомментировать определенные строки CSS в файле LESS с помощью сочетания клавиш Ctrl + /, что было здорово, за исключением того, что он вставлялся // по умолчанию для нераспознанных типов файлов . Это не бесплатная программа, а less является довольно распространенным, поэтому я поверил в это и пошел с этим. Это сломало мой код. Есть меню настроек для обучения правильной разметке комментариев для каждого типа файла.

Источник

CSS @media печатает проблемы с background-color;

Я новичок в этой компании, и у нас есть продукт, который использует мили CSS. Я пытаюсь создать для нашего приложения таблицу стилей для печати, но у меня проблемы с background-color in @media print .

Все остальное работает, я могу изменить границы и тому подобное, но background-color в печати это не получится. Теперь я понимаю, что вы не сможете ответить на мой вопрос без более подробной информации. Мне было просто любопытно, был ли у кого-то этот вопрос или что-то подобное раньше.

Если у пользователя в настройках печати отключен «Цвет фона и изображения для печати», CSS не будет переопределять это, поэтому всегда учитывайте это. Это настройка по умолчанию .

Как только это будет установлено, он будет печатать цвета фона и изображения, что у вас там будет работать.

Встречается в разных местах. В IE9beta это находится в Print-> Параметры страницы в разделе Параметры бумаги

В FireFox он находится в Параметры страницы -> вкладка [Формат и параметры] в разделе Параметры.

Чтобы включить фоновую печать в Chrome:

Работает для всех ящиков — включая ячейки таблицы .

• (Если верить выводному файлу PDF-принтера . )
• Проверено только в Chrome + Firefox на Ubuntu .

Попробуйте это, у меня это работает в Google Chrome:

-webkit-print-color-adjust: exact; в одиночку is Not enough вы должны использовать !important с атрибутом

это предварительный просмотр печати на Chrome после того, как я добавил !important к каждому background-color и color приписал в каждом теге

и это предварительный просмотр печати на Chrome перед добавлением !important

Теперь, чтобы узнать, как inject !important использовать стиль div, посмотрите этот ответ. Я не могу ввести стиль с правилом!

Два решения, которые работают (по крайней мере, на современном Chrome — не тестировались):

1. Важное право в обычном объявлении CSS (даже в печати @media)
2. Используйте SVG

Если вы хотите создать «дружественные для печати» страницы, я рекомендую добавить «! Важное» в ваш CSS @media print. Это побуждает большинство браузеров печатать фоновые изображения, цвета и т. Д.

Есть еще один трюк, который вы можете сделать, не активируя опцию печати границы, упомянутую в других публикациях. Поскольку границы будут распечатаны вы можете моделировать твердый фон цвет с этим хаком:

Активируйте его, добавив класс к вашему элементу:

Хотя это требует некоторого дополнительного кода и особой осторожности, чтобы сделать видимыми цвета фона, это пока единственное известное мне решение.

Обратите внимание, что этот хак не будет работать с элементами, отличными от display: block; или display: table-cell; , поэтому, например,

и не будет работать.

Мы используем это, чтобы получить фоновые цвета во всех браузерах (по-прежнему требуется IE9 +).

Что касается хрома, я использовал что-то вроде этого, и это сработало для меня.

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

Несмотря на то, что !important использование обычно не одобряется, этот код нарушает правила, при bootstrap.css котором строки таблицы не печатаются background-color .

Предположим, вы пытаетесь стилизовать следующий HTML:

Чтобы переопределить этот CSS, поместите следующее (более конкретное) правило в таблицу стилей:

Это работает, потому что правило более конкретное, чем загрузочное по умолчанию.

Нашел эту проблему, потому что у меня была похожая проблема при попытке сгенерировать PDF из вывода html в Google Apps Script, где фоновые цвета также не «напечатаны».

The -webkit-print-color-adjust:exact; и !important решения, конечно, не работали, но box-shadow: inset 0 0 0 1000px gold; сделали . отличный взлом, большое спасибо 🙂

Думаю, я бы добавил недавнюю и актуальную помощь 2015 года из недавнего опыта печати css.

Был в состоянии печатать фоны и цвета независимо от настроек диалогового окна печати.

Чтобы сделать это, я должен был использовать комбинацию ! Важное & -webkit-print-color-Adjust: точный! Важный чтобы фон и цвета печатались правильно.

Кроме того, при объявлении цветов я обнаружил, что наиболее упрямые области нуждаются в определении непосредственно для вашей цели. Например:

Проверено и работает над Chrome, Firefox, Opera и Edge к 2016/10 году. Должен работать в любом браузере и всегда должен выглядеть так, как ожидается.

Хорошо, я провел небольшой кросс-браузерный эксперимент для печати цветов фона. Просто скопируйте, вставьте и наслаждайтесь!

Вот полная печатная HTML-страница для начальной загрузки:

Лучшее «решение», которое я нашел, — предоставить заметную кнопку или ссылку «Печать», которая появляется в небольшом диалоговом окне, в котором смело, кратко и кратко объясняется, что им необходимо настроить параметры принтера (с помощью инструкции ABC 123), чтобы включить фон. и печать изображений. Это было очень успешно для меня.

В некоторых случаях (блоки без содержимого, но с фоном) его можно переопределить с помощью границ, индивидуально для каждого блока.

Источник

CSS стили для печати — media print

Привет. Не так давно мне понадобилось распечатать несколько страниц своего сайта и когда я попытался вывести их на печать, то был, мягко говоря, удивлен от увиденного. Если вы сейчас нажмете CTRL + P , то поймете чем идет речь. Дело в том, что очень давно при оптимизации сайта я благополучно выпилил все лишнее, в том числе и CSS стили для печати. Распечатать контент конечно можно, но там очень много лишнего. У себя я вряд ли что-то буду менять в этом плане, а для тех, кому это действительно необходимо, будем разбирать как сделать отображение печатной версии страниц максимально корректным.

@Media print CSS на примерах

Я уже писал о том, что такое медиа-запросы и как они работают, даже записывал видео, но там речь идет об адаптивности под мобильные гаджеты. Но в действительности принцип остается таким же. Нужно прописать отдельные CSS стили для печати и сделать это можно двумя способами.

• Media print в основном файле стилей
• С подключением отдельного файла

В этом случае мы говорим браузерам, что эти CSS стили нужны лишь для печати страницы, в остальных случаях их учитывать не нужно.

Здесь мы подключаем отдельный CSS файл, в котором записываем стили для печати. Пишем как обычно, без дополнительных media? мы это делаем при подключении.

Предпросмотр перед печатью страницы

По идее се, что нужно сделать, это нажать CTRL + P и уже будет видно как будет выглядеть распечатанная страница. Но в современных браузерах есть дополнительные инструменты, которые позволяют сделать эмуляцию печати. Давайте посмотрим как это сделать в Хроме. Жмем F12 Затем на 3 точки справа — More Tools — Renderig.

Затем листаем открывшуюся панель вниз и в самом низу ищем кнопку-переключатель, который и будет переключать стили.

Это поможет сделать CSS стили для печати гораздо быстрее. А вообще, далеко не всем сайтам это нужно. Если конечно вы намеренно не предлагаете пользователям распечатать контент. Тогда да, это даже необходимо. Если вы имеете свой сайт — проверьте CSS стили для печати, возможно они тоже не в лучшем виде.

Источник