CSS Using Variables in Media Queries

CSS variables (custom properties) are a powerful tool for maintaining reusable and dynamic styles. One of their most compelling features is the ability to use them inside media queries, allowing you to define responsive styles more efficiently.

Why Use Variables in Media Queries?

Using variables in media queries improves:

  1. Maintainability: Define breakpoints and shared values once, and reuse them across your stylesheet.
  2. Consistency: Ensure your breakpoints and responsive styles stay uniform.
  3. Flexibility: Easily update breakpoints or values by changing the variable definition.

How to Use Variables in Media Queries

CSS variables can be used in media queries just like any other value, provided they are resolved to a valid unit (e.g., px, em, %).

Defining Breakpoints in :root

:root {
    --mobile-breakpoint: 768px;
    --desktop-breakpoint: 1200px;
}

Using the Variables in Media Queries

@media (max-width: var(--mobile-breakpoint)) {
    body {
        background-color: lightblue;
    }
}

@media (min-width: var(--desktop-breakpoint)) {
    body {
        background-color: lightgreen;
    }
}

Here:

  • When the viewport width is 768px or smaller, the background changes to light blue.
  • When the viewport width is 1200px or larger, the background changes to light green.

Example: Dynamic Font Sizes

Let’s adjust the font size dynamically using variables inside media queries.

CSS:

:root {
    --font-size-small: 14px;
    --font-size-medium: 18px;
    --font-size-large: 22px;
}

p {
    font-size: var(--font-size-small);
}

@media (min-width: 600px) {
    :root {
        --font-size-small: var(--font-size-medium);
    }
}

@media (min-width: 1024px) {
    :root {
        --font-size-small: var(--font-size-large);
    }
}

Explanation:

  • The default --font-size-small is used for all <p> elements.
  • For screens 600px or wider, the variable is updated to use --font-size-medium.
  • For screens 1024px or wider, the variable is updated to use --font-size-large.

This approach keeps the logic centralized and ensures all font sizes adjust consistently.

Combining Variables with calc()

CSS variables can also be combined with the calc() function in media queries for more dynamic behavior.

Example: Dynamic Widths

:root {
    --base-width: 300px;
}

.card {
    width: var(--base-width);
}

@media (max-width: 800px) {
    :root {
        --base-width: calc(100% - 20px);
    }
}

Here:

  • The default width of the .card is 300px.
  • On smaller screens (800px or less), the variable dynamically changes to calculate a responsive width of 100% - 20px.

Real-World Application: Responsive Grid Layout

CSS variables can make grid layouts more adaptable by allowing you to change column counts or gaps dynamically.

Example:

:root {
    --grid-columns: 1fr 1fr;
    --grid-gap: 20px;
}

.grid {
    display: grid;
    grid-template-columns: var(--grid-columns);
    gap: var(--grid-gap);
}

@media (max-width: 768px) {
    :root {
        --grid-columns: 1fr;
        --grid-gap: 10px;
    }
}

In this example:

  • On larger screens, the grid has two columns (1fr 1fr) and a gap of 20px.
  • On screens 768px or smaller, the grid switches to a single column with a smaller gap of 10px.

Limitations

  1. Custom Property Scope: CSS variables in media queries only work if the variable is defined in the appropriate scope. Defining them in :root ensures global availability.
  2. IE Compatibility: CSS variables are not supported in Internet Explorer. Use feature detection or fallbacks for older browsers.
  3. Static Nature of Media Queries: Unlike JavaScript, media queries are evaluated once at load time. Dynamic updates to variables won’t automatically re-trigger media queries.

Best Practices

  1. Centralize Variables: Define breakpoints and reusable styles in :root for easy updates.
  2. Use Descriptive Names: Clearly name your variables (e.g., --mobile-breakpoint or --grid-gap) to improve readability.
  3. Combine with JavaScript: For more dynamic scenarios, use JavaScript to update CSS variables and trigger responsive changes.

Conclusion

Using CSS variables in media queries makes your stylesheets cleaner, more consistent, and easier to maintain. By centralizing breakpoints and other responsive values, you can quickly adapt your design to changing requirements or layouts.

For more in-depth tutorials on CSS and web development, visit The Coding College! Stay ahead in your coding journey!

Leave a Comment