CSS3 Переменные в медиа-запросах
Использование переменных в медиа-запросах
Теперь мы хотим изменить значение переменной внутри медиа-запроса.
Совет: Медиа-запросы - это определение разных правил стиля для разных устройств (экранов, планшетов, мобильных телефонов и т.д.). Вы можете узнать больше о медиа-запросах в главе Медиа-запросы.
Здесь мы сначала объявляем новую локальную переменную с именем --fontsize для класса .container. Мы устанавливаем его значение в 25 пикселей. Затем мы используем его в классе .container дальше вниз. Затем мы создаем правило @media, которое гласит: "Когда ширина браузера 450px или шире, измените значение переменной --fontsize класса .container на 50px".
Вот полный пример:
Пример
/* Объявления переменных */
: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;
}
/* Стили */
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()
| Свойство | Описание |
|---|---|
| var() | Вставляет значение переменной CSS |