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

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

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

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

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

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

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

• Качественные печатные версии веб-страниц на фильтрах CSS
• Использование единиц измерения CSS Q
• Немного полезного о тегах span, em и strong