What is the difference between “screen” and “only screen” in media queries?

Media query is used to create responsive web design. It means that the view of web page differ from system to system based on screen or media types.
screen: It is used to set the screen size of media query. The screen size can be set by using max-width and min-width. The screen size is differ from screen to screen.

Syntax:

@media screen and (max-width: width)

Example: This example use media query which works when the maximum width of display area is 400px. It is specifying screen as opposed to the other available media types the most common other one being print.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
      
    <!-- CSS property to set style -->    
    <style>
        body {
            background-color: lightgreen;
        }
          
        /* Media query */
        @media screen and (max-width: 400px) {
            body {
                background-color: green;
                color:white;
            }
        }
    </style>
</head>
  
<body>
    <h1>The @media Rule</h1>
      
    <p>
        Resize the browser window. When the width of
        this document is 400 pixels or less, the 
        background-color is "green", otherwise it
        is "lightblue".
    </p>
</body>
  
</html>                    

chevron_right


Output:
Screen size greater then 400px:

Screen size less then 400px:

only screen: The only keyword is used to prevent older browsers that do not support media queries with media features from applying the specified styles.

Syntax:

@media only screen and (max-width: width) 

Example 2

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
      
    <!-- CSS property to set style -->    
    <style>
        body {
            background-color: lightgreen;
        }
          
        /* Media query */
        @media only screen and (max-width: 400px) {
            body {
                background-color: green;
            }
        }
    </style>
</head>
  
<body>
    <h1>The @media Rule</h1>
      
    <p>
        Resize the browser window. When the width of
        this document is 400 pixels or less, the 
        background-color is "green", otherwise it
        is "lightblue".
    </p>
</body>
  
</html>                    

chevron_right


Output:
Screen size greater then 400px:

Screen size less then 400px:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.