Using Variables in Media Queries

Tutorial 4 of 5

1. Introduction

1.1 Goals

In this tutorial, we aim to understand how to utilize CSS Variables in media queries for responsive design. This will allow your website to adapt its layout to different screen sizes.

1.2 Learning Outcomes

By the end of this tutorial, you will be able to:
- Define CSS variables
- Use CSS variables in media queries
- Understand the concept of responsive design

1.3 Prerequisites

Basic knowledge of HTML, CSS, and the concept of media queries would be beneficial.

2. Step-by-Step Guide

CSS variables, also known as custom properties, are entities defined by CSS authors that contain specific values to be reused throughout a document.

Media queries are a popular technique for delivering a tailored style sheet to desktops, laptops, tablets, and mobile phones (such as iPhone and Android phones).

2.1 Defining CSS Variables

CSS variables are defined with two dashes in front of the name and are set using the : character, like this:

:root {
  --main-color: #c06;
}

In this code, --main-color is a variable set to the color #c06.

2.2 Using CSS Variables in Media Queries

You can use these variables in a media query like this:

@media (max-width: 600px) {
  :root {
    --main-color: #f06;
  }
}

In this code, --main-color is set to #f06 when the viewport is 600 pixels wide or less.

3. Code Examples

Let's illustrate this with a practical example. We will create a simple webpage with a title that changes color based on the viewport size.

3.1 Code Snippet

<!DOCTYPE html>
<html>
<head>
  <style>
    :root {
      --main-color: #c06;
    }

    h1 {
      color: var(--main-color);
    }

    @media (max-width: 600px) {
      :root {
        --main-color: #f06;
      }
    }
  </style>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

3.2 Explanation

We define a variable called --main-color and assign it the color #c06.
We apply this variable as the color of the h1 tag.
We use a media query to change the value of --main-color to #f06 when the viewport is 600px wide or less.

3.3 Expected result

When the viewport is larger than 600px, the color of the title will be #c06. When the viewport is 600px or less, the color will change to #f06.

4. Summary

In this tutorial, we've learned how to define and use CSS variables in media queries. This technique allows us to create dynamic styles that can adapt based on the viewport size, which is a key aspect of responsive web design.

For further learning, you could explore how to use other types of CSS properties in media queries, such as font sizes, margins, and paddings.

5. Practice Exercises

Create a webpage with a paragraph of text that changes font size based on the viewport size.
Create a webpage with a div that changes background color and padding based on the viewport size.

5.1 Solutions and Explanations

For the first exercise, define a CSS variable for the font size and use it in a media query to change the font size based on the viewport size.
For the second exercise, define two CSS variables for the background color and padding. Use these variables in a media query to change the div's style based on the viewport size.

Remember, the key to mastering this concept is practice. Try to incorporate CSS variables and media queries in your future projects for a more responsive design!