CSS Variables in Media Queries

CSS Variables (also known as custom properties) offer a powerful way to define reusable values in your stylesheets. Using CSS Variables within media queries allows for dynamic and flexible styling that adapts to different screen sizes and conditions. This article explores how to use CSS Variables within media queries to create responsive, scalable web designs.

01. What Are CSS Variables?

CSS Variables are custom properties that store reusable values in CSS. They are declared with the -- prefix and can be reused throughout your CSS, offering a more modular and maintainable approach to styling.

Example of defining a CSS variable:


:root {
  --primary-color: #3498db;
}

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

Here, the variable --primary-color holds a color value, and it is used to style the h1 element.

02. Using CSS Variables in Media Queries

Media queries allow you to apply different styles based on various conditions such as screen width, orientation, or resolution. By using CSS Variables inside media queries, you can change multiple CSS properties dynamically when the conditions of the media query are met.

1. Defining Variables Inside Media Queries

To define CSS Variables inside a media query, you can simply declare them within the scope of that media query. This allows the variable values to change based on the media query conditions.


:root {
  --primary-color: #3498db;
}

@media (max-width: 768px) {
  :root {
    --primary-color: #e74c3c; /* Changes color when the screen width is <= 768px */
  }
}

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

In this example, the primary color changes to #e74c3c when the viewport width is less than or equal to 768px. The h1 color will automatically update based on the active value of the --primary-color variable.

2. Overriding Variables in Different Screen Sizes

One of the main benefits of using CSS Variables in media queries is the ability to override styles based on screen size. You can easily change the layout, typography, or color schemes to make your design responsive to various screen dimensions.


:root {
  --font-size: 16px;
  --margin: 20px;
}

@media (max-width: 768px) {
  :root {
    --font-size: 14px; /* Adjusts font size for smaller screens */
    --margin: 10px;   /* Adjusts margin for smaller screens */
  }
}

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

In this example, the font size and margin are dynamically adjusted when the viewport width is 768px or smaller, making the text and layout more suitable for mobile screens.

03. Advanced Techniques with CSS Variables in Media Queries

Using CSS Variables inside media queries opens the door to more advanced styling techniques. Let's explore some common use cases where CSS Variables shine in responsive design.

1. Dynamic Theming

CSS Variables make it easy to implement dynamic theming that changes based on screen size or user preferences. You can define different color schemes or design elements for various screen widths.


:root {
  --bg-color: #ffffff;
  --text-color: #2c3e50;
}

@media (max-width: 768px) {
  :root {
    --bg-color: #2c3e50; /* Dark background for smaller screens */
    --text-color: #ecf0f1; /* Light text for contrast */
  }
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

This example uses media queries to switch the background and text colors for mobile screens, offering a more appropriate visual experience for smaller devices.

2. Layout Adjustments

CSS Variables can be used to adjust the layout of your website by modifying properties like grid layout, flexbox properties, and padding values. This allows you to create a layout that adapts to the available screen size.


:root {
  --grid-columns: 3;
}

@media (max-width: 768px) {
  :root {
    --grid-columns: 1; /* Switch to a single column layout on smaller screens */
  }
}

.container {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
}

In this example, the number of columns in a grid layout changes based on the screen size. For smaller screens, the layout switches to a single-column design, improving readability and usability.

3. Fluid Typography

With CSS Variables and media queries, you can create fluid typography that adjusts based on the viewport size. This ensures that text is always legible and appropriately sized across devices.


:root {
  --font-size: 16px;
}

@media (max-width: 768px) {
  :root {
    --font-size: 14px; /* Smaller font size for mobile devices */
  }
}

h1 {
  font-size: var(--font-size);
}

This method allows for responsive typography, where the font size adapts based on the width of the viewport, enhancing readability on various devices.

04. Benefits of Using CSS Variables in Media Queries

Maintainability: By using CSS Variables, you can manage styles in one place and override them as needed, making your code more maintainable and easier to update.
Dynamic Styling: CSS Variables allow you to change multiple related properties dynamically, ensuring your design is always adaptable to different screen sizes and devices.
Performance: Using CSS Variables with media queries reduces the need for repetitive CSS rules, improving load time and performance.
Flexibility: CSS Variables make it easy to implement responsive designs that are highly customizable, making your website adaptable to various user needs.

05. Browser Support

CSS Variables are supported by most modern browsers, including Google Chrome, Mozilla Firefox, Safari, and Microsoft Edge. However, older versions of Internet Explorer do not support CSS Variables. Always test for compatibility to ensure that your design functions correctly across all platforms.

Google Chrome 49+
Mozilla Firefox 31+
Safari 9.1+
Microsoft Edge 15+
Opera 36+

06. Conclusion

Using CSS Variables in media queries is a powerful technique that enables flexible and maintainable responsive design. By defining and overriding variables within media queries, you can create dynamic and adaptive layouts, typography, and themes that improve user experience across various devices. With proper usage, CSS Variables and media queries can help streamline your CSS and make it more responsive, reducing code redundancy while increasing efficiency.