CSS Variables (Using Media Queries)

Using Variables in Media Queries

Now we want to change a variable value inside a media query.

Tip: Media Queries are about defining different style rules for different devices (screens, tablets, mobile phones, etc.).

Here, we first declare a new local variable named --fontsize for the .container class. We set its value to 25 pixels. Then we use it in the .container class further down. Then, we create a @media rule that says "When the browser's width is 450px or wider, change the --fontsize variable value of the .container class to 50px."

Here is the complete example:

Example

/* Variable declarations */
:root {
--blue: #1e90ff;
--white: #ffffff;
}

.container {
--fontsize: 25px;
}

/* Styles */
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;
}
}

• @media screen and (min-width: 450px) { .container { --fontsize: 50px; } } - This style will be applied when the screen size is more than or equal to 450px.

Here is another example where we also change the value of the --blue variable in the @media rule:

Example

/* Variable declarations */
:root {
--blue: #1e90ff;
--white: #ffffff;
}

.container {
--fontsize: 25px;
}

/* Styles */
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;
}
}

• @media screen and (min-width: 450px) { .container { --fontsize: 50px; } } - This style will be applied when the screen size is more than or equal to 450px.

CSS var() Function

Property	Description
var()	Inserts the value of a CSS variable