How to target desktop, tablet and mobile using Media Query ?

Last Updated : 24 Apr, 2024

Media queries allow targeting different devices by adjusting CSS styles based on their screen size and resolution. By specifying breakpoints, developers can optimize layouts for desktop, tablet, and mobile devices, ensuring a responsive design across various screen sizes.

The screen resolutions of different devices are listed below:

Device	Max Width (pixels)
Mobile (Smartphone)	480
Low-Resolution Tablets and iPads	767
Tablets iPads (portrait mode)	1024
Desktops	1280
Huge size (Larger screen)	1281 and greater

Syntax:

@media(media feature) {
    // CSS Property
}

Parameters:

@media rule to include a block of CSS properties when a certain condition is true.
media features are width (max-width and min-width), aspect ratio, resolution, orientation, etc.

Example: In this example, we are changing the background color according to the width of the device.

html

<!DOCTYPE html>
<html>

<head>
    <title>Media Query</title>

    <style>
        /* Media Query for Mobile Devices */
        @media (max-width: 480px) {
            body {
                background-color: red;
            }
        }

        /* Media Query for low resolution  Tablets, Ipads */
        @media (min-width: 481px) and (max-width: 767px) {
            body {
                background-color: yellow;
            }
        }

        /* Media Query for Tablets Ipads portrait mode */
        @media (min-width: 768px) and (max-width: 1024px) {
            body {
                background-color: blue;
            }
        }

        /* Media Query for Laptops and Desktops */
        @media (min-width: 1025px) and (max-width: 1280px) {
            body {
                background-color: green;
            }
        }

        /* Media Query for Large screens */
        @media (min-width: 1281px) {
            body {
                background-color: white;
            }
        }
    </style>
</head>

<body style="text-align:center;">
    <h1>GeeksforGeeks</h1>
    <h2>Media Query</h2>
</body>

</html>

Output:

Media Query Example Output

Example 2: In this example, we are changing the font color according to the width of the device.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Media Query</title>

    <style>
        /* Media Query for Mobile Devices */
        @media (max-width: 480px) {
            h1 {
                color: red;
            }
        }

        /* Media Query for low resolution  Tablets, Ipads */
        @media (min-width: 481px) and (max-width: 767px) {
            h1 {
                color: yellow;
            }
        }

        /* Media Query for Tablets Ipads portrait mode */
        @media (min-width: 768px) and (max-width: 1024px) {
            h1 {
                color: blue;
            }
        }

        /* Media Query for Laptops and Desktops */
        @media (min-width: 1025px) and (max-width: 1280px) {
            h1 {
                color: green;
            }
        }

        /* Media Query for Large screens */
        @media (min-width: 1281px) {
            h1 {
                color: rgb(66, 7, 161);
            }
        }
    </style>
</head>

<body style="text-align:center;">
    <h1>GeeksforGeeks</h1>
    <h2>Media Query</h2>
</body>

</html>