Работа с адаптивными медиазапросами при печати

Вопрос: https://output.jsbin.com/donapohuci

Это две колонки на рабочем столе. Используя медиазапрос CSS, я установил его в один столбец, когда область просмотра составляет 800 пикселей или меньше:

div {
  float: left; 
  width: 50%;
}

@media (max-width:800px) {
  div {
    width: 100%
  }
}

Проблема в том, что когда вы собираетесь распечатать это (на данный момент, используя Chrome), он решает, что лист бумаги размером с букву меньше 800 пикселей, поэтому печатает с использованием стилей медиазапроса.

Мы используем Bootstrap, где он использует медиа-запросы, как это. Одним из решений является изменение CSS таким образом, чтобы он добавил модификатор 'screen':

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

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

Есть ли способ обойти эту проблему, если не написать отдельную таблицу стилей печати только для этой конкретной страницы, которую мы должны напечатать "как вы видите на экране"?

Я думаю о том, как сказать браузеру "притвориться, что бумага шире, чем она есть, и использовать макет рабочего стола при печати..."

Источник

1 ответ

Я бы решил это путем добавления медиа screen атрибут в ссылке на обычный CSS, чтобы он не относился к печати, и создайте отдельную пользовательскую таблицу стилей печати, которая будет вызываться после, снова, используя print медиа атрибут:

<link href="print.css" rel="stylesheet" media="print">

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

Источник

Вы пытаетесь использовать col- класс в Bootstrap. Вы должны прочитать документацию по сетке загрузчика https://getbootstrap.com/examples/grid/

Источник
Другие вопросы по тегам