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">
<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">
<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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...