css - Variables - The var() Function Part 5: Combining CSS Variables with Media Queries

Responsive Design with CSS Variables

CSS variables can be adjusted in media queries for better responsiveness.

Example 9: Adjusting Variables for Different Screens

:root {

  --padding: 20px;

}

@media (max-width: 600px) {

  :root {

    --padding: 10px;

  }

}

.box {

  padding: var(--padding);

}

Explanation:

The --padding value changes based on screen size.

This makes responsive design easier and more consistent.

Example 10: Modifying Font Size for Mobile

:root {

  --base-font-size: 18px;

}

@media (max-width: 500px) {

  :root {

    --base-font-size: 14px;

  }

}

p {

  font-size: var(--base-font-size);

}

Explanation:

The font size reduces on smaller screens while keeping the code clean and maintainable.