This site is mobile accessible. Press the "Tap Here" button to use a smaller font-size. Tap Here!

Smartphone icons created by Freepik - Flaticon

14.4.3 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.). You can learn more Media Queries in our Media Queries Chapter.

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 1: Using variables in media queries part: 1

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

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

Example 2: Using variables in media queries part: 2

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

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
var()	49.0	15.0	31.0	9.1	36.0

CSS var() Function

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