Core Code
Core Code Modern Dev Handbook

Variables in Media Queries

Variables can change in responsive layouts.

Preview

Code

<style>
:root{
--size:14px;
}

.box{
font-size:var(--size);
}

@media (min-width:600px){
:root{
--size:20px;
}
}
</style>

<div class="box">Responsive variable text</div>

More CSS Variables Examples (8)

example Update Variable with JavaScript open example example Basic CSS Variable open example example Multiple Variables open example example Variable Scope open example example Variable Override open example example Variable Fallback open example example Theme Variables open example example Variable Hover Change open example