Have a question?
Message sent Close
View Categories

CSS Using Variables in Media Queries

1 min read

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.

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

Powered by BetterDocs

Leave a Reply