4.1 Основные концепции
CSS-переменные и медиа-запросы предоставляют мощные инструменты для создания адаптивного веб-дизайна, который автоматически подстраивается под различные размеры экранов и устройства. Переменные позволяют централизованно управлять стилями, а медиа-запросы позволяют изменять эти стили в зависимости от условий, таких как ширина экрана.
Основные концепции
- CSS-переменные: позволяют задавать значения, которые можно повторно использовать по всему CSS-коду. Они могут быть изменены в различных контекстах, таких как медиа-запросы, что делает их особенно полезными для адаптивного дизайна.
- Медиа-запросы: позволяют применять CSS-стили в зависимости от характеристик устройства, таких как ширина или высота экрана. Это позволяет адаптировать внешний вид и поведение веб-страницы под разные устройства.
Использование переменных в медиа-запросах
CSS-переменные можно использовать внутри медиа-запросов для изменения значений стилей в зависимости от условий. Это позволяет создавать более гибкие и легко поддерживаемые адаптивные дизайны.
Пример использования переменных в медиа-запросах:
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
--font-size: 16px;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
font-size: var(--font-size);
}
a {
color: var(--primary-color);
}
@media (max-width: 600px) {
:root {
--main-bg-color: #e0e0e0;
--font-size: 14px;
}
}
@media (min-width: 601px) and (max-width: 1200px) {
:root {
--main-bg-color: #d0d0d0;
--font-size: 15px;
}
}
@media (min-width: 1201px) {
:root {
--main-bg-color: #f0f0f0;
--font-size: 16px;
}
}
<body>
<p>This is a paragraph with a link to <a href="#">Example.com</a>.</p>
</body>
Объяснение:
В этом примере значения переменных изменяются в зависимости от ширины экрана:
- Для экранов шириной до 600px фон меняется на более темный оттенок, а размер шрифта уменьшается.
- Для экранов шириной от 601px до 1200px фон меняется на средний оттенок, а размер шрифта немного увеличивается.
- Для экранов шириной более 1200px применяются исходные значения переменных.
4.2 Примеры переменных в медиа-запросах
Пример 1: Адаптивные отступы и размеры шрифтов
:root {
--padding: 20px;
--font-size: 16px;
}
.container {
padding: var(--padding);
font-size: var(--font-size);
}
@media (max-width: 600px) {
:root {
--padding: 10px;
--font-size: 14px;
}
}
@media (min-width: 601px) and (max-width: 1200px) {
:root {
--padding: 15px;
--font-size: 15px;
}
}
@media (min-width: 1201px) {
:root {
--padding: 20px;
--font-size: 16px;
}
}
<div class="container">
<p>This is a responsive container with adaptive padding and font size.</p>
</div>
Объяснение:
- В этом примере контейнер
.containerизменяет свои отступы и размер шрифта в зависимости от ширины экрана
Пример 2: Темизация сайта с использованием переменных и медиа-запросов
:root {
--bg-color: #ffffff;
--text-color: #000000;
--link-color: #3498db;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
a {
color: var(--link-color);
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #000000;
--text-color: #ffffff;
--link-color: #9b59b6;
}
}
<body>
<p>This text and link will adapt to the user's preferred color scheme. Visit <a href="#">Example.com</a>.</p>
</body>
Объяснение:
- В этом примере сайт изменяет цветовую схему в зависимости от предпочтений пользователя (
prefers-color-scheme: dark). Цвет фона, текста и ссылок изменяются автоматически при переключении между светлой и темной темой
4.3 Адаптивная сетка
Пример использования переменных и медиа-запросов для адаптивной сетки:
:root {
--columns: 1fr;
--gap: 10px;
}
.grid-container {
display: grid;
grid-template-columns: var(--columns);
gap: var(--gap);
}
@media (min-width: 600px) {
:root {
--columns: 1fr 1fr;
}
}
@media (min-width: 900px) {
:root {
--columns: 1fr 1fr 1fr;
}
}
<div class="grid-container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
Объяснение:
- В этом примере используется адаптивная сетка, которая изменяет количество столбцов в зависимости от ширины экрана. На узких экранах (до 600px) сетка имеет один столбец, на средних (от 600px до 900px) два столбца, и на широких (более 900px) три столбца
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ