Premium CSS Course

CSS Media Queries

CSS Media Queries allow you to apply different styles based on the conditions of the device, such as the screen width, height, resolution, and orientation. Media queries are essential for creating responsive web designs that adapt to various screen sizes and devices.

What are Media Queries?

Media queries are a powerful feature in CSS that enable you to define different styles for different devices. By using media queries, you can create designs that adjust automatically depending on the device's screen size, resolution, and other characteristics.

Basic Syntax of Media Queries

A media query consists of a media type (like screen, print, or all) and one or more conditions (also known as expressions) like screen width, height, or orientation. Here's the general syntax:

        @media media_type and (condition) {
            /* CSS rules */
        }
    

For example, a simple media query that targets screens with a minimum width of 768px looks like this:

        @media screen and (min-width: 768px) {
            body {
                background-color: lightblue;
            }
        }
    

Common Media Features

Media queries can check various device features. Some common ones include:

• width: The width of the viewport.
• height: The height of the viewport.
• device-width: The width of the device screen.
• device-height: The height of the device screen.
• orientation: The orientation of the device (portrait or landscape).
• resolution: The resolution of the device (e.g., pixel density).

Example: Mobile-First Media Query

In mobile-first design, we start by writing styles for mobile devices and then use media queries to apply different styles for larger devices. Here's an example:

        /* Mobile styles */
        body {
            background-color: lightyellow;
        }

        /* Tablet and above (min-width: 768px) */
        @media screen and (min-width: 768px) {
            body {
                background-color: lightblue;
            }
        }

        /* Desktop and above (min-width: 1024px) */
        @media screen and (min-width: 1024px) {
            body {
                background-color: lightgreen;
            }
        }
    

In this example, the background color changes based on the screen size: yellow for mobile, blue for tablets, and green for desktops. This ensures that the design adapts to different screen sizes.

Media Query Operators

There are several operators you can use in media queries to define the conditions more precisely:

• min-width: Specifies the minimum width of the viewport (e.g., min-width: 768px).
• max-width: Specifies the maximum width of the viewport (e.g., max-width: 1200px).
• min-height: Specifies the minimum height of the viewport.
• max-height: Specifies the maximum height of the viewport.
• and: Combines multiple conditions (e.g., min-width: 600px and max-width: 1200px).
• not: Negates a media query condition (e.g., not screen).
• only: Targets a specific media query without overlapping others (e.g., only screen and (max-width: 600px)).

Example: Multiple Media Queries for Different Devices

Here’s an example with multiple breakpoints to target different devices:

        /* Default styles for mobile */
        body {
            font-size: 14px;
        }

        /* Tablet (min-width: 768px) */
        @media screen and (min-width: 768px) {
            body {
                font-size: 16px;
            }
        }

        /* Desktop (min-width: 1024px) */
        @media screen and (min-width: 1024px) {
            body {
                font-size: 18px;
            }
        }

        /* Large Desktop (min-width: 1440px) */
        @media screen and (min-width: 1440px) {
            body {
                font-size: 20px;
            }
        }
    

This ensures that the font size is optimized for different screen sizes, from mobile to large desktops.

Using Media Queries for Responsive Layouts

Media queries are also used to create responsive layouts that adjust based on the available screen size. Here's an example of using media queries to adjust a layout:

        /* Default (mobile-first) layout */
        .container {
            display: block;
        }

        /* Tablet (min-width: 768px) */
        @media screen and (min-width: 768px) {
            .container {
                display: flex;
                justify-content: space-between;
            }
        }

        /* Desktop (min-width: 1024px) */
        @media screen and (min-width: 1024px) {
            .container {
                display: grid;
                grid-template-columns: 1fr 1fr;
            }
        }
    

This code demonstrates how the layout changes from a simple block layout on mobile to a flex layout on tablets and a grid layout on desktops.

Best Practices for Using Media Queries

• Mobile-first design: Start by designing for mobile devices and use media queries to enhance the layout for larger screens.
• Use relative units: Use relative units like em, rem, or percentages instead of fixed units like pixels to ensure that elements scale appropriately across different screen sizes.
• Keep breakpoints consistent: Use consistent breakpoints for similar devices to maintain a smooth experience across different screen sizes.
• Test on real devices: Always test your design on various devices to ensure the responsiveness works as expected.