Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Создание простых media queries для печати

7 января 2018 | Опубликовано в css | Нет комментариев »

Одним из значительных преимуществ CSS является возможность создания разных стилей для отображения содержимого в разных форматах, на разных устройствах или для разных пользователей: например, внешний вид веб-страницы, просматриваемой на смартфоне, должен отличаться от вида этой же веб-страницы, открытой на мониторе компьютера с диагональю 27″, как и от напечатанной версии этой веб-страницы.

 

 


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

 

/* здесь записаны стили, которые применятся ко всему */
@media print { 
        /* здесь записаны стили, которые применятся только для печати */
}

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

Автор урока Dudley Storey

 

Перевод — Дежурка

Смотрите также:




Оставить ответ


семь + 1 =

Вставить изображение