Примеры медиазапросов CSS
Предоставление разных стилей для разных устройств — популярная задача медиазапросов. Правила CSS могут при этом зависеть от характеристик устройства, в том числе от ширины области просмотра.
Пример
Здесь цвет фона меняется вместе с шириной области просмотра.
Prompt
Создайте страницу, использующую медиазапросы для изменения цвета фона body при разной ширине области просмотра: olive для мобильных устройств, blue при 768px и tan при 992px. Включите белый текст для первых двух и чёрный текст для последнего.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Color Breakpoints</title>
<style>
body {
background-color: olive;
color: white;
}
@media screen and (min-width: 768px) {
body {
background-color: blue;
color: white;
}
}
@media screen and (min-width: 992px) {
body {
background-color: tan;
color: black;
}
}
</style>
</head>
<body>
<h1>Resize the browser window to see the effect!</h1>
<p>The background color will change at different viewport widths.</p>
</body>
</html>
Медиазапросы для колонок
Ещё одно распространённое применение — гибкие макеты. В зависимости от размера экрана макет здесь переключается между четырьмя колонками, двумя колонками и колонками на всю ширину.
Глава CSS Flexbox подробнее объясняет модуль гибкого блочного макета.
Подробнее об адаптивном веб-дизайне читайте в руководстве по адаптивному веб-дизайну.
Пример
Prompt
Создайте страницу с четырьмя колонками одинаковой ширины с помощью flexbox. Используйте медиазапросы, чтобы колонки становились по две в ряд при 992px или меньше и складывались в одну колонку при 600px или меньше. Каждая колонка должна содержать образец текста.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexible Columns Layout</title>
<style>
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-wrap: wrap;
}
.column {
flex: 25%;
padding: 20px;
}
@media screen and (max-width: 992px) {
.column {
flex: 50%;
}
}
@media screen and (max-width: 600px) {
.container {
flex-direction: column;
}
}
</style>
</head>
<body>
<h2>Responsive Four Column Layout</h2>
<p>Resize the browser window to see the responsive effect.</p>
<div class="container">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>Some text inside the first column.</p>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<p>Some text inside the second column.</p>
</div>
<div class="column" style="background-color:#ccc;">
<h2>Column 3</h2>
<p>Some text inside the third column.</p>
</div>
<div class="column" style="background-color:#ddd;">
<h2>Column 4</h2>
<p>Some text inside the fourth column.</p>
</div>
</div>
</body>
</html>
Медиазапросы для меню
Меню навигации тоже может стать адаптивным: с помощью медиазапросов его дизайн подстраивается под каждый размер экрана.
Пример
Prompt
Создайте горизонтальное навигационное меню с помощью неупорядоченного списка и flexbox. Оформите ссылки белым текстом на тёмном фоне (#333). Используйте медиазапрос, чтобы элементы меню располагались вертикально, когда область просмотра составляет 600px или меньше.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation Menu</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333333;
display: flex;
}
ul li a {
display: block;
color: white;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover {
background-color: #111111;
}
@media screen and (max-width: 600px) {
ul {
flex-direction: column;
}
}
</style>
</head>
<body>
<h2>Responsive Navigation Menu</h2>
<p>Resize the browser window to see the effect.</p>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
Скрытие элементов с помощью медиазапросов
Маленьким экранам могут быть нужны не все элементы, и медиазапрос может скрыть те, которые не нужны.
Пример
Prompt
Создайте страницу со стилизованным элементом div, который скрывается, когда ширина области просмотра составляет 600px или меньше, используя медиазапрос с display: none.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hide Element With Media Query</title>
<style>
#div1 {
background-color: lightgreen;
padding: 20px;
font-size: 20px;
}
@media screen and (max-width: 600px) {
#div1 {
display: none;
}
}
</style>
</head>
<body>
<h2>Hide Elements on Small Screens</h2>
<p>Resize the browser window. The green box will be hidden at 600px or less.</p>
<div id="div1">I will be hidden on small screens.</div>
</body>
</html>
Изменение размера шрифта с помощью медиазапросов
Размер шрифта элемента тоже может зависеть от ширины области просмотра с помощью медиазапроса.
Пример
Prompt
Создайте страницу с элементом div, размер шрифта которого меняется на 80px, когда ширина области просмотра составляет 600px или больше, используя медиазапрос с min-width.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Font Size With Media Query</title>
<style>
#div1 {
font-size: 20px;
}
@media screen and (min-width: 600px) {
#div1 {
font-size: 80px;
}
}
</style>
</head>
<body>
<h2>Change Font Size</h2>
<div id="div1">Resize the browser window to see the font size change.</div>
</body>
</html>
Медиазапросы для ориентации экрана
Ориентация экрана — ещё одно условие, на которое может реагировать медиазапрос, соответствующим образом изменяя макет страницы.
Пример
Пока экран находится в альбомной ориентации, body получает другой цвет фона.
Prompt
Создайте страницу, использующую медиазапрос для изменения цвета фона body на lightblue, когда ориентация экрана альбомная.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Screen Orientation Media Query</title>
<style>
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<h2>Screen Orientation</h2>
<p>The background color will be lightblue when the screen is in landscape mode.</p>
</body>
</html>
Медиазапросы для пользовательских предпочтений
Анимация может быть проблемой для людей с чувствительностью к движению, которые предпочитают сайты с меньшим её количеством.
Чтобы узнать, запросил ли пользователь уменьшение движения, например меньше анимаций или переходов, проверьте медиахарактеристику prefers-reduced-motion. Когда эта настройка активна на его компьютере, вы можете отключить анимации.
Пример
Prompt
Создайте страницу, использующую медиафункцию prefers-reduced-motion для отключения всех анимаций и переходов, когда пользователь запросил уменьшение движения.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prefers Reduced Motion</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: coral;
animation: slide 2s infinite alternate;
}
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(300px); }
}
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
</style>
</head>
<body>
<h2>Prefers Reduced Motion</h2>
<p>If you have "reduce motion" enabled in your system settings, the animation below will be disabled.</p>
<div class="box"></div>
</body>
</html>
Адаптивная галерея изображений
Сочетание flexbox и медиазапросов даёт адаптивную галерею изображений.
Пример
Prompt
Создайте адаптивную галерею изображений с помощью flexbox и медиазапросов. Отображайте четыре изображения в ряд на больших экранах, два в ряд на средних экранах (ниже 800px) и одно в ряд на маленьких экранах (ниже 600px). Используйте изображения-заполнители.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image Gallery</title>
<style>
* {
box-sizing: border-box;
}
.gallery {
display: flex;
flex-wrap: wrap;
}
.gallery img {
width: 100%;
padding: 5px;
}
.gallery-item {
flex: 25%;
padding: 5px;
}
@media screen and (max-width: 800px) {
.gallery-item {
flex: 50%;
}
}
@media screen and (max-width: 600px) {
.gallery-item {
flex: 100%;
}
}
</style>
</head>
<body>
<h2>Responsive Image Gallery</h2>
<p>Resize the browser window to see the responsive effect.</p>
<div class="gallery">
<div class="gallery-item">
<img src="img_5terre.jpg" alt="Cinque Terre">
</div>
<div class="gallery-item">
<img src="img_forest.jpg" alt="Forest">
</div>
<div class="gallery-item">
<img src="img_lights.jpg" alt="Northern Lights">
</div>
<div class="gallery-item">
<img src="img_mountains.jpg" alt="Mountains">
</div>
</div>
</body>
</html>
Адаптивный сайт
То же сочетание flexbox и медиазапросов позволяет построить макет целого адаптивного сайта.
Пример
Prompt
Создайте адаптивный макет веб-сайта с заголовком, панелью навигации, основной областью содержимого с боковой колонкой и подвалом. Используйте flexbox и медиазапросы, чтобы макет складывался вертикально на маленьких экранах (ниже 600px).
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Website</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
}
.header {
background-color: #333;
color: white;
padding: 15px;
text-align: center;
}
.navbar {
display: flex;
background-color: #555;
}
.navbar a {
color: white;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:hover {
background-color: #333;
}
.row {
display: flex;
flex-wrap: wrap;
}
.side {
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
.main {
flex: 70%;
background-color: white;
padding: 20px;
}
.footer {
background-color: #333;
color: white;
text-align: center;
padding: 15px;
}
@media screen and (max-width: 600px) {
.navbar, .row {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="header">
<h1>My Website</h1>
</div>
<div class="navbar">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
<div class="row">
<div class="side">
<h2>About Me</h2>
<p>Some text about me in a side column.</p>
</div>
<div class="main">
<h2>Title</h2>
<p>Some text about the main content.</p>
<p>More text to fill the main area.</p>
</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>