What’s the difference between CSS “screen” and “only screen” in media queries?
What is the difference between “screen” and “only screen” in CSS media queries?
In CSS, media queries play an important role in creating responsive web designs. Nowadays, responsive design has become one of the most important factors for every website to attract visitors.
Generally speaking, we can write media queries using the @media CSS rule. However, we can use different conditions and keywords in media queries to target different devices, such as mobile devices, desktop devices, printer screens, and so on.
In this tutorial, we’ll learn the difference between ‘screen’ and ‘only screen’ in media queries.
In media queries, what is screen?
In CSS, we use the ‘screen’ keyword in media queries to target all devices with screens, such as tablets, mobile phones, desktop computers, printers, screen readers, and more.
Syntax
Users can use the ‘screen’ keyword in media queries using the following syntax.
@media screen and (condition) {
/* CSS code */
}
In the above syntax, conditions are used to set breakpoints for different devices.
Example 1
In the following example, we use the ‘screen’ keyword in media queries in CSS. We have a div element with the class name “text.”
On desktop, the background color of the body is ‘aqua’, but when the screen size is less than 1200 pixels, we change it to ‘yellow’. Additionally, we’ve changed the styles of the div element for devices smaller than 1200 pixels.
In the output, users can resize their browser window and observe the difference in styles.
<html>
<head>
<style>
* { background-color: aqua; }
.text {
background-color: red;
width: 500px;
height: auto;
padding: 10px;
margin: 10px;
border: 3px solid green;
}
@media screen and (max-width: 1200px) {
* { background-color: yellow; }
.text {
background-color: green;
width: 50%;
border: 5px dotted red;
}
}
</style>
</head>
<body> <h3>Using the @media Rule in CSS for Responsive Web Design</h3>
<h4>Setting the Screen Width to Less Than 1200 Pixels to Change Styles</h4>
<div class="text">
This is a test div element.
</div>
</body>
What is “only screen” in media queries?
When writing media queries in CSS, we can also use the “only” keyword within the “screen” keyword. When we use the “only” keyword, it applies styles only when the browser matches the media type and media element.
However, older browsers have special effects on the ‘only’ keyword. For example, if older browsers do not support media queries and media elements, they should not apply the styles defined in the media query block when the device does not conform to the media type specification.
However, all modern browsers ignore the ‘only’ keyword.
Syntax
Users can use the ‘only’ keyword in media queries with the following syntax.
@media only screen and (condition) {
/* CSS code */
}
Example 2
In the following example, we define a ‘multiple’ div element that contains five ‘single’ div elements. We have set styles for both the ‘multiple’ and ‘single’ div elements.
In addition, we use media queries to set styles for devices with screen widths less than 680 pixels. Users can resize their browser window and observe the differences between single and multiple div element designs.
<html>
<head>
<style>
.multiple {
width: 100%;
height: 90%;
background-color: blue;
border-radius: 12px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.single {
width: 90%;
height: 100px;
background-color: yellow;
margin: 10px;
float: left;
margin: 0 auto;
border-radius: 12px;
}
@media only screen and (min-width: 680px) {
.multiple {
width: 90%;
height: 80%;
background-color: aqua; border-radius: 12px;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
}
.single {
width: 45%;
height: 100px;
background-color: red;
margin: 10px;
float: left;
border-radius: 12px;
}
}
</style>
</head>
<body>
<h2>Using the @media Rule in CSS for Responsive Web Design</h2>
<h3>Setting Screen Width to Less Than 680px to Change Style</h3>
<div class="multiple">
<div class="single"></div>
<div class="single"></div>
<div class="single"></div>
<div class="single"></div>
</div>
</body>
</html>
What’s the difference between “screen” and “only screen” in media queries?
Here, we’ve explained the difference between “screen” and “only screen” in media queries.
| Attributes | “screen” media type | “only screen” media type |
|---|---|---|
| Syntax | @media screen { /* CSS code */ } | @media only screen { /* CSS code */ } |
| Target | It targets all devices, such as smartphones, desktop computers, tablets, etc. | It targets all devices except those that do not support media types and features (such as scanners or printers). |
Users learn the difference between the ‘screen’ and ‘only screen’ media types. The ‘only’ keyword has no effect in modern browsers, which always ignore it, but it is useful for older browser versions.