Now, we aim to modify the value of a variable within a media query.
| Hint: Media Queries involve establishing distinct style rules tailored for various devices such as screens, tablets, and mobile phones. Delve deeper into Media Queries through our dedicated chapter on the subject. |
In this example, we initially define a new local variable called –fontsize within the .container class, assigning it a value of 25 pixels. Subsequently, we utilize this variable within the .container class later in the code. Following that, we introduce a @media rule specifying that “When the browser’s width is 450px or wider, alter the value of the –fontsize variable within the .container class to 50px.”
Here’s the full example:
Example
|
:root { |
Here’s another instance where we additionally modify the value of the –blue variable within the @media rule:
Example
|
/* Variable declarations */ |
The numbers in the table indicate the initial browser version that provides full support for the var() function.
