CSS Variables in Media Queries
Media queries let you set different style rules for different devices, such as screens, tablets, and phones. You can learn more about them in the Media Queries Chapter.
A useful trick is to change CSS variable values inside a media query. This way, the styles that use those variables will automatically update when the screen size changes.
Example
This example sets a local variable --fontsize to 20px for the .container class. Then a @media rule changes --fontsize to 40px when the browser window is 450px wide or more.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Variables in Media Queries</title>
<style>
:root {
--primary-bg-color: #1e90ff;
--primary-color: #ffffff;
}
body {
background-color: var(--primary-bg-color);
}
.container {
--fontsize: 20px;
color: var(--primary-bg-color);
background-color: var(--primary-color);
padding: 15px;
font-size: var(--fontsize);
}
.container h2 {
border-bottom: 2px solid var(--primary-bg-color);
}
@media screen and (min-width: 450px) {
.container {
--fontsize: 40px;
}
}
</style>
</head>
<body>
<div class="container">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
</div>
</body>
</html>
Changing multiple variables
You can also change more than one variable inside a media query. This example changes both the --fontsize and the --primary-bg-color variables when the screen is 450px or wider.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Variables in Media Queries</title>
<style>
:root {
--primary-bg-color: #1e90ff;
--primary-color: #ffffff;
}
body {
background-color: var(--primary-bg-color);
}
.container {
--fontsize: 20px;
color: var(--primary-bg-color);
background-color: var(--primary-color);
padding: 15px;
font-size: var(--fontsize);
}
.container h2 {
border-bottom: 2px solid var(--primary-bg-color);
}
@media screen and (min-width: 450px) {
.container {
--fontsize: 40px;
}
:root {
--primary-bg-color: lightblue;
}
}
</style>
</head>
<body>
<div class="container">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
</div>
</body>
</html>
CSS var() Function
The var() function inserts the value of a CSS variable. You can read more about it in the CSS var() reference.