CSS Using Variables in Media Queries

Using Variables in Media Queries

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

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:

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

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