CSS-переменные в медиазапросах
Медиазапросы позволяют задавать разные правила стиля для разных устройств, таких как экраны, планшеты и телефоны. Подробнее об этом можно узнать в главе о медиазапросах.
Полезный приём — изменять значения CSS-переменных внутри медиазапроса. Таким образом, стили, использующие эти переменные, будут автоматически обновляться при изменении размера экрана.
Пример
В этом примере локальная переменная --fontsize устанавливается в 20px для класса .container. Затем правило @media изменяет --fontsize на 40px, когда окно браузера имеет ширину 450px или больше.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Variables in Media Queries</title>
<style>
:root {
--primary-bg-color: #1e90ff;
--primary-color: #ffffff;
}
body {
background-color: var(--primary-bg-color);
}
.container {
--fontsize: 20px;
color: var(--primary-bg-color);
background-color: var(--primary-color);
padding: 15px;
font-size: var(--fontsize);
}
.container h2 {
border-bottom: 2px solid var(--primary-bg-color);
}
@media screen and (min-width: 450px) {
.container {
--fontsize: 40px;
}
}
</style>
</head>
<body>
<div class="container">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
</div>
</body>
</html>
Изменение нескольких переменных
Вы также можете изменить более одной переменной внутри медиазапроса. Этот пример изменяет как переменную --fontsize, так и переменную --primary-bg-color, когда ширина экрана составляет 450px или больше.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Variables in Media Queries</title>
<style>
:root {
--primary-bg-color: #1e90ff;
--primary-color: #ffffff;
}
body {
background-color: var(--primary-bg-color);
}
.container {
--fontsize: 20px;
color: var(--primary-bg-color);
background-color: var(--primary-color);
padding: 15px;
font-size: var(--fontsize);
}
.container h2 {
border-bottom: 2px solid var(--primary-bg-color);
}
@media screen and (min-width: 450px) {
.container {
--fontsize: 40px;
}
:root {
--primary-bg-color: lightblue;
}
}
</style>
</head>
<body>
<div class="container">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
</div>
</body>
</html>
Функция CSS var()
Функция var() вставляет значение CSS-переменной. Подробнее об этом можно узнать в справочнике по CSS var().