---
title: CSS Using Variables in Media Queries
description: "> ## 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.). You can learn more Media…"
url: "https://apprentice.mn/docs/css-using-variables-in-media-queries/"
updated: "2021-05-12"
category: CSS
---

# CSS Using Variables in 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.). You can learn more Media Queries in our [Media Queries Chapter](https://www.w3schools.com/css/css3_mediaqueries.asp).

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:

     `/* 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

      `/* 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 `var()` function.

| Function | Chrome | Internet explorer | Mozila Firefox | Safari | Opera |
| --- | --- | --- | --- | --- | --- |
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |

---

##  

## CSS var() Function

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

        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-using-variables-in-media-queries%2F&linkname=CSS%20Using%20Variables%20in%20Media%20Queries](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-using-variables-in-media-queries%2F&linkname=CSS%20Using%20Variables%20in%20Media%20Queries)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-using-variables-in-media-queries%2F&linkname=CSS%20Using%20Variables%20in%20Media%20Queries](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-using-variables-in-media-queries%2F&linkname=CSS%20Using%20Variables%20in%20Media%20Queries)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-using-variables-in-media-queries%2F&linkname=CSS%20Using%20Variables%20in%20Media%20Queries](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-using-variables-in-media-queries%2F&linkname=CSS%20Using%20Variables%20in%20Media%20Queries)[https://www.addtoany.com/share](https://www.addtoany.com/share)