Using Media Queries for Different Screen Sizes in CSS

When designing websites, it's important to ensure that your content looks good on all devices. This is where media queries come into play. Media queries are a feature in CSS that allow you to apply different styles depending on the characteristics of the device, such as screen size, resolution, or orientation.

What are Media Queries?

Media queries are used to apply different styles based on the conditions like the width, height, and orientation of the screen. This ensures that your website is responsive and looks great on devices ranging from smartphones to large desktop monitors.

Basic Structure of a Media Query

A typical media query consists of a media type (such as screen or print) and one or more conditions (such as a specific screen width).

            @media screen and (max-width: 600px) {
                /* CSS styles for small screens */
            }
        

Example 1: Media Query for Small Screens

Let's start by writing a simple media query that targets devices with a screen width of 600px or smaller. This is typically used for mobile devices.

            @media screen and (max-width: 600px) {
                body {
                    background-color: lightblue;
                }
                h1 {
                    font-size: 18px;
                }
            }
        

In this example, the background-color of the body will change to lightblue, and the font size of h1 will be reduced to 18px on screens smaller than 600px wide.

Example 2: Media Query for Larger Screens

Now, let's create a media query for larger screens, like tablets or desktops, where we might want larger fonts and a different layout.

            @media screen and (min-width: 601px) {
                body {
                    background-color: white;
                }
                h1 {
                    font-size: 36px;
                }
            }
        

This media query applies to screens wider than 600px. Here, the background color is set to white, and the font size of h1 is increased to 36px.

Example 3: Media Query for Landscape Orientation

Media queries can also be used to target different orientations of devices. For example, if a user switches their phone to landscape mode, you might want to adjust the layout.

            @media screen and (orientation: landscape) {
                body {
                    background-color: lightgreen;
                }
            }
        

In this example, the background color of the body will change to light green when the device is in landscape mode.

Combining Multiple Media Queries

You can also combine multiple conditions in a single media query. For instance, you can target screens that are both smaller than 600px and have a landscape orientation.

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

This media query will apply when the device is both in landscape mode and has a screen width of 600px or less, changing the background color to light coral.

Conclusion

Using media queries is a powerful way to make your website responsive and adaptive to different screen sizes and orientations. By using media queries effectively, you can create designs that look great on a variety of devices, improving user experience and accessibility.