CSS Responsive Web Design Using Media Queries

Creating websites requires responsive design, meaning the layout and styling should adapt to the device's screen size. Originally, web design targeted desktop PCs only, but with the variety of devices and screen sizes today, web development has evolved. Media queries are a key tool for achieving this adaptability.

Common Size Units in CSS

Here are some common units used in responsive design:

Understanding Media Queries

Media queries allow you to adjust page content based on conditions like screen width. Here's an example:

.box {
    background-color: blue;
}

@media (max-width: 576px) {
    .box {
        background-color: red;
    }
}

This means the background color of elements with the class .box is blue for screens wider than 576px and red for screens 576px or smaller.

You can define any breakpoints based on your target devices. Here are some common ones:

Example: Adjusting Font Size

In this example, the font size changes for screens smaller than 576px:

.heading {
    font-size: 20px;
}

@media (max-width: 576px) {
    .heading {
        font-size: 18px;
    }
}

For small projects, managing all styles in one CSS file with media queries at the bottom can become unwieldy. This is where the rem unit shines, reducing redundant style definitions across breakpoints.

The Power of REM Units

By default, 1 rem equals 16px and is tied to the root element's font size (the <html> tag). Adjusting the root font size affects all elements using rem, as they inherit from the root.

Here’s how to set the root font size:

/* Root element */
html {
    font-size: 62.5%; /* 10px when default browser font size is 16px */
}

Note: I corrected 0.625% to 62.5%, as the original value was likely a typo. 62.5% of 16px (the default browser font size) equals 10px, a common base for rem calculations.

Browser font size settings can vary (e.g., small: 12px, medium: 16px, large: 24px), so using a percentage ensures proportionality. Adjust the root font size at different breakpoints like this:

/* Large screens - 1536px */
@media (max-width: 96rem) {
    html {
        font-size: 62.5%; /* 10px */
    }
}

/* Large laptops - 1280px */
@media (max-width: 80rem) {
    html {
        font-size: 56.3%; /* ~9px */
    }
}

/* Small laptops - 1024px */
@media (max-width: 64rem) {
    html {
        font-size: 50%; /* 8px */
    }
}

/* Phone landscape - 768px */
@media (max-width: 48rem) {
    html {
        font-size: 43.8%; /* ~7px */
    }
}

/* Phone portrait - 576px */
@media (max-width: 36rem) {
    html {
        font-size: 37.5%; /* 6px */
    }
}

This demonstrates the power of rem: adjust one property, and all rem-based styles scale accordingly.

Common CSS Properties Using REM

Properties where rem is most effective:

For some properties, resizing doesn’t significantly improve responsiveness, so I prefer fixed units like px:

Conclusion

Using rem units simplifies responsive design. By adjusting a single root property, you can efficiently scale your layout across devices—making your CSS cleaner and more manageable!