Responsive Design with Media Queries

Introduction

Responsive design ensures that web pages adapt to different screen sizes and devices. CSS media queries enable developers to apply different styles based on screen width, height, device type, or orientation.

1. What Are Media Queries?

Media queries are used to apply CSS rules conditionally based on the device’s properties.

Syntax:

@media media-type and (condition) {
    /* CSS styles */
}

Example:

@media screen and (max-width: 600px) {
    body {
        background-color: lightgray;
    }
}

This changes the background color for screens smaller than 600px.

2. Common Media Query Breakpoints

Breakpoints define width thresholds where layout adjustments are needed.

Standard Breakpoints:

/* Small devices (phones) */
@media (max-width: 600px) { ... }

/* Tablets */
@media (min-width: 601px) and (max-width: 1024px) { ... }

/* Desktops */
@media (min-width: 1025px) { ... }

3. Responsive Layouts with Media Queries

3.1 Fluid Grid System

.container {
    width: 100%;
    max-width: 1200px;
    margin: auto;
}
.column {
    width: 50%;
    float: left;
}
@media (max-width: 768px) {
    .column {
        width: 100%;
    }
}

3.2 Responsive Navigation Menu

.menu {
    display: flex;
    justify-content: space-between;
}
@media (max-width: 768px) {
    .menu {
        flex-direction: column;
    }
}

4. Using Media Queries for Images

Responsive Image Example:

img {
    max-width: 100%;
    height: auto;
}

This ensures images scale correctly on all devices.

5. Combining Multiple Conditions

Example:

@media screen and (min-width: 600px) and (max-width: 1024px) {
    body {
        background-color: blue;
    }
}

This applies styles for screens between 600px and 1024px wide.

Conclusion

Media queries allow developers to create flexible and user-friendly designs. Implementing responsive layouts ensures a seamless experience across all devices.