Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we are going to learn how can we target desktop, tablet, and mobile using Media Query. Media Query is a popular technique that enables to delivery of a style sheet to different devices that have different screen sizes and resolutions respectively. They are used to customize the appearance of a website on multiple devices.

The screen resolutions of different devices are listed below:

  • Mobile (Smartphone) max-width: 480px
  • Low-Resolution Tablets and iPads max-width: 767px
  • Tablets iPads portrait mode max-width: 1024px
  • Desktops max-width: 1280px
  • Huge size (Larger screen) max-width: 1281px 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:

ezgifcom-video-to-gif

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>


Output:

ezgifcom-video-to-gif-(1)

Output

Supported Browsers:

  • Google Chrome 21.0
  • Internet Explorer 9.0
  • Mozilla Firefox 3.5
  • Safari 4.0
  • Opera 9.0


Last Updated : 29 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads