Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 07 Mar, 2019

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.




<!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>                    

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




<!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>                    

Output:
Screen size greater then 400px:

Screen size less then 400px:




My Personal Notes arrow_drop_up
Recommended Articles
Page :