Как верстать под печать?

Бродил вчера по сети и наткнулся на то, что оказывается при верстке нужно не забывать и про печатные устройства. Как это делать?

Предлагается сделать такое:

@media print {
    /* print styles go here */
    body {
        font-size: 28px;
    }
}


Но мне кажется, что это ерунда. Туда отдельно писать код для всей страницы снова?
Как насчет того, чтобы в медиа-запросе не писать -
@media screen and (max-width: 600px) {
/* CSS-стили */;}
мол чисто для экранов. А указать -
@media (max-width: 600px) {
/* CSS-стили */;}
- применяется для всего (вообще наверное screen лучше не указывать).

Или же для печати нужно сверстать один вариант, который всегда будет выводиться для печати?
  • Вопрос задан
  • 1954 просмотра
Решения вопроса 2
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Ну давай посмотрим на примере тостера.

Попробуем распечатать страницу с вопросом.
Для начала вопрос: для чего мы его распечатываем? Очевидно, нам интересен вопрос, и главное его решение. Именно это мы хотим распечатать на бумаге.

Что же нам предлагают верстальщики из ТМ?
5f98935dba783645914348.png


Мы получаем на бумажной версии кнопку главного меню, поле поиска, кнопки добавления вопроса и контекстного меню. Отлично. Я обязательно их понажимаю после распечатки. Ха-ха. Хорошо хоть сайдбар спрятали.

Смотрим дальше
5f98942e4692f875969058.png


Форма комментирования. Ну что же. Наверное я отстал от современных технологий в своей деревне и во всем мире уже давно можно комментировать распечатанные страницы...

В самом конце аж три листа совершенно бесполезной информации.

В общем мы видим совершенно не оптимизированную под печать страницу.

А вот если не забывать про печатные устройства, можно все это лишнее как минимум спрятать.
Ответ написан
@acwartz
Тут должна быть ваша реклама.
Но мне кажется, что это ерунда. Туда отдельно писать код для всей страницы снова?

На чистом CSS - да.

Чтобы скрасить монотонность копирования одного и того же, существуют препроцессоры css (LESS, SCSS, Stylus), и вместо дублирования под все медиа, Вы сразу пишите медиа запросы к конкретному классу, в последующем препроцессор сформирует нужное, и оно будет ожидаемо работать.
Например:
.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
  @media screen and (min-width: 640px) {
    width: 350px;
  }
  @media print {
    display: none;
  }
}

на выходе будет:
.sidebar {
	width: 300px;
}

@media screen and (orientation: landscape) {
	.sidebar {
		width: 500px;
	}
}

@media screen and (min-width: 640px) {
	.sidebar {
		width: 350px;
	}
}

@media print {
	.sidebar {
		display: none;
	}
}


Отладка меди-запросов включается в DevTools доп утилитах рендера:
5f9925e993892286417134.png
Туть:
5f99260ea64cd837540535.png
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы