CSS Використання змінних в медіа-запитах
Як використовувати змінні в медіа-запитах
Тепер ми хочемо змінити значення змінної всередині медіа-запита.
Порада: Медіа-запити призначені для визначення різних стильових правил для різних пристроїв (екранів моніторів, планшетів, мобільних телефонів і т.д.). Ви можете дізнатись більше про медіа-запити в розділі Медіа-запити на нашому сайті W3Schools українською.
Тут ми спочатку оголошуємо нову локальну змінну з іменем --fontsize для класу .container. Встановлюємо його значення на 25 пікселів. Потім використовуємо його в більш низькому класі .container. Потім створюємо правило @media, яке проголошує: "Коли ширина браузера складає 450 пікселів або більше, змініть значення змінної --fontsize для .container до 50 пікселів".
Ось повний приклад:
Приклад
/* Оголошення змінної */
: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().
| Функція | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS Функція var()
| Властивість | Опис |
|---|---|
| var() | Вставляє значення CSS змінної |
