Медиазапросы в качестве условия позволяют не только выставлять ширину/высоту и ориентацию экрана, но и более конкретно указывать устройство, для которого будут применены стили.
В стандарте CSS3 определены 4 основных типа устройств, которые возможно указать в качестве условия медиазапроса:
<style>
/* Стили сайта */
@media print {
/* Стили для вывода страницы на печать */
}
@media speech {
/* Стили для скринридеров */
}
</style>
Так же, как и с остальными медиазапросами, тип устройства можно указывать при подключении CSS-файла:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Подключение CSS-файлов</title>
<!-- Общие стили для проекта -->
<link rel="stylesheet" href="style.css">
<!-- Стили вывода страницы на печать -->
<link rel="stylesheet" media="print" href="print.css">
</head>
<body>
<!-- Разметка проекта -->
</body>
</html>
Помимо указания конкретного типа устройства, CSS позволяет указывать и особые характеристики устройства, для которого необходимо применить стили. Основными характеристиками, которые поддерживают большинство браузеров, являются:
<style>
/* Стили сайта */
@media (color) {
/* Стили для цветных устройств */
}
@media (device-aspect-ratio: 16/9) {
/* Стили для устройств с соотношением экрана 16 к 9 */
}
</style>
Создайте любую страницу на компьютере и попробуйте добавить все характеристики в условие медиазапроса так, чтобы стили сработали на вашем компьютере.
Вам ответят команда поддержки Хекслета или другие студенты.
Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.
Загляните в раздел «Обсуждение»:
Статья «Ловушки обучения»
Вебинар «Как самостоятельно учиться»
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.
Наши выпускники работают в компаниях:
С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.
Зарегистрируйтесь или войдите в свой аккаунт