4.1 Basic Concepts
CSS variables and media queries give you powerful tools to build responsive web design that automatically adjusts to different screen sizes and devices. Variables let you manage styles centrally, while media queries allow you to change those styles based on conditions like screen width.
Basic Concepts
- CSS Variables: let you define values that can be reused throughout your CSS code. They can be tweaked within different contexts like media queries, making them super handy for responsive design.
- Media Queries: let you apply CSS styles based on device characteristics such as screen width or height. This helps adapt the look and feel of your web page to various devices.
Using Variables in Media Queries
You can use CSS variables within media queries to change style values based on conditions. This makes it easier to create flexible, maintainable responsive designs.
Example of using variables in media queries:
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
--font-size: 16px;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
font-size: var(--font-size);
}
a {
color: var(--primary-color);
}
@media (max-width: 600px) {
:root {
--main-bg-color: #e0e0e0;
--font-size: 14px;
}
}
@media (min-width: 601px) and (max-width: 1200px) {
:root {
--main-bg-color: #d0d0d0;
--font-size: 15px;
}
}
@media (min-width: 1201px) {
:root {
--main-bg-color: #f0f0f0;
--font-size: 16px;
}
}
<body>
<p>This is a paragraph with a link to <a href="#">Example.com</a>.</p>
</body>
Explanation:
In this example, variable values change depending on the screen width:
- For screens up to 600px wide, the background gets a darker shade and the font size shrinks.
- For screens between 601px and 1200px, the background changes to a medium shade and font size slightly increases.
- For screens wider than 1200px, original variable values apply.
4.2 Examples of Variables in Media Queries
Example 1: Responsive Padding and Font Sizes
:root {
--padding: 20px;
--font-size: 16px;
}
.container {
padding: var(--padding);
font-size: var(--font-size);
}
@media (max-width: 600px) {
:root {
--padding: 10px;
--font-size: 14px;
}
}
@media (min-width: 601px) and (max-width: 1200px) {
:root {
--padding: 15px;
--font-size: 15px;
}
}
@media (min-width: 1201px) {
:root {
--padding: 20px;
--font-size: 16px;
}
}
<div class="container">
<p>This is a responsive container with adaptive padding and font size.</p>
</div>
Explanation:
- In this example, the
.containerchanges its padding and font size based on the screen width.
Example 2: Theming a Site with Variables and Media Queries
:root {
--bg-color: #ffffff;
--text-color: #000000;
--link-color: #3498db;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
a {
color: var(--link-color);
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #000000;
--text-color: #ffffff;
--link-color: #9b59b6;
}
}
<body>
<p>This text and link will adapt to the user's preferred color scheme. Visit <a href="#">Example.com</a>.</p>
</body>
Explanation:
- In this example, the site changes its color scheme based on user preferences (
prefers-color-scheme: dark). The background, text, and link colors automatically change when switching between light and dark themes.
4.3 Responsive Grid
Example of using variables and media queries for a responsive grid:
:root {
--columns: 1fr;
--gap: 10px;
}
.grid-container {
display: grid;
grid-template-columns: var(--columns);
gap: var(--gap);
}
@media (min-width: 600px) {
:root {
--columns: 1fr 1fr;
}
}
@media (min-width: 900px) {
:root {
--columns: 1fr 1fr 1fr;
}
}
<div class="grid-container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
Explanation:
- This example uses a responsive grid that changes the number of columns based on screen width. On narrow screens (up to 600px) the grid has one column. On medium screens (from 600px to 900px) it has two columns, and on wide screens (over 900px) it has three columns.
GO TO FULL VERSION