CSS с использованием переменных в медиа-запросах
Использование переменных в медиа-запросах
Теперь мы хотим изменить значение переменной внутри медиа-запроса.
Совет. Медиа-запросы предназначены для определения разных правил стиля для разных устройств (экранов, планшетов, мобильных телефонов и т. д.). Вы можете узнать больше о медиа-запросах в нашей главе о медиа-запросах .
Здесь мы сначала объявляем новую локальную переменную с именем --fontsize для
.containerкласса. Мы устанавливаем его значение на 25 пикселей. Затем мы используем его в
.containerклассе ниже. Затем мы создаем
@mediaправило, которое гласит: «Когда ширина браузера составляет 450 пикселей или больше, измените значение переменной --fontsize
.containerкласса на 50 пикселей».
Вот полный пример:
Пример
/* Variable declarations */
:root {
--blue: #1e90ff;
--white: #ffffff;
}
.container {
--fontsize: 25px;
}
/* Styles */
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container
{
color: var(--blue);
background-color: var(--white);
padding: 15px;
font-size: var(--fontsize);
}
@media screen and (min-width:
450px) {
.container {
--fontsize: 50px;
}
}
Вот еще один пример, где мы также меняем значение переменной --blue в @mediaправиле:
Пример
/* Variable declarations */
:root {
--blue: #1e90ff;
--white: #ffffff;
}
.container {
--fontsize: 25px;
}
/* Styles */
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container
{
color: var(--blue);
background-color: var(--white);
padding: 15px;
font-size: var(--fontsize);
}
@media screen and (min-width:
450px) {
.container {
--fontsize: 50px;
}
:root {
--blue: lightblue;
}
}
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает эту
var()функцию.
| Function | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS-функция var()
| Property | Description |
|---|---|
| var() | Inserts the value of a CSS variable |