CSS использование переменных в медиа-запросах

Использование переменных в медиа-запросах

Теперь мы хотим изменить значение переменной в медиа-запросе.

Совет:Медиа-запросы предназначены для определения различных стилевых правил для различных устройств (дисплеев, планшетов, смартфонов и т.д.). Вы можете узнать больше о медиа-запросах в разделе "Медиа-запросы".

Здесь мы сначала объявляем новый локальный переменной --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() 49.0 15.0 31.0 9.1 36.0

Функция CSS var()

Функция Описание
var() Вставьте значение CSS переменной.