CSS Использование переменных в медиа-запросах
Как использовать переменные в медиа-запросах
Теперь мы хотим изменить значение переменной внутри медиа-запроса.
Совет: Медиа-запросы предназначены для определения разных стилевых правил для разных устройств (экранов мониторов, планшетов, мобильных телефонов и т.д.). Вы можете узнать больше о медиа-запросах в главе Медиа-запросы на нашем сайте W3Schools на русском.
Здесь мы сначала объявляем новую локальную переменную с именем --fontsize для класса .container. Устанавливаем его значение на 25 пикселей. Затем используем его в более низком классе .container. Затем создаём правило @media, которое гласит: "Когда ширина браузера составляет 450 пикселей или больше, измените значение переменной --fontsize для .container до 50 пикселей".
Вот полный пример:
Пример
/* Variable declarations */
:root {
--blue: #1e90ff;
--white: #ffffff;
}
.container {
--fontsize: 25px;
}
/* Стили */
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:
Пример
/* Объявления переменных */
: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().
| Функция | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS Функция var()
| Свойство | Описание |
|---|---|
| var() | Вставляет значение CSS переменной |
