Open In App
Related Articles

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

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report
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 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: 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

                    
Output: Screen size greater then 400px: Screen size less then 400px:

Last Updated : 07 Mar, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads