x
<html><head><meta name="viewport" content="width=device-width, initial-scale=1"><style>/* Объявления переменных */:root { --blue: #1e90ff; --white: #fff;}.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; }}</style></head><body><h1>Использование переменных в медиа-запросах</h1><div class="container"> <h2>Lorem Ipsum</h2> <p>Когда ширина браузера меньше 450 пикселей, размер шрифта этого div составляет 25 пикселей. Если он составляет 450 пикселей или больше, установите для переменной --fontsize значение 50 пикселей. Измените размер окна браузера, чтобы увидеть эффект.</p></div></body></html>