Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
What is the difference between “screen” and “only screen” in media queries?
In CSS, media queries play an important role in creating responsive web designs. We can write media queries using the @media CSS rule with different conditions and keywords to target various devices like mobile devices, desktops, tablets, and printers.
In this tutorial, we will learn the difference between 'screen' and 'only screen' in media queries.
Syntax
/* Using screen */
@media screen and (condition) {
/* CSS code */
}
/* Using only screen */
@media only screen and (condition) {
/* CSS code */
}
What is Screen in Media Queries?
The screen keyword targets all devices with a screen, including smartphones, tablets, desktops, and other screen-based devices. It excludes non-screen media like printers or speech synthesizers.
Example: Using Screen Media Type
The following example demonstrates how the screen media type works with responsive design
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: aqua;
font-family: Arial, sans-serif;
}
.text {
background-color: red;
width: 500px;
padding: 20px;
margin: 10px;
border: 3px solid green;
color: white;
}
@media screen and (max-width: 768px) {
body {
background-color: yellow;
}
.text {
background-color: green;
width: 90%;
border: 5px dotted red;
color: black;
}
}
</style>
</head>
<body>
<h3>Using @media screen for Responsive Design</h3>
<p>Resize the browser window to see the changes</p>
<div class="text">
This div changes style based on screen size
</div>
</body>
</html>
On desktop: Aqua background with red box containing white text On mobile (below 768px): Yellow background with green box containing black text
What is Only Screen in Media Queries?
The only keyword is used with screen to prevent older browsers from applying styles when they don't fully support media queries. Modern browsers ignore the only keyword, but it was important for backward compatibility with legacy browsers.
Example: Using Only Screen Media Type
The following example shows the only screen implementation
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px;
background-color: lightblue;
}
.box {
background-color: orange;
padding: 20px;
border-radius: 8px;
text-align: center;
}
@media only screen and (min-width: 768px) {
.container {
flex-direction: row;
background-color: lightgreen;
}
.box {
flex: 1;
background-color: coral;
}
}
</style>
</head>
<body>
<h3>Using @media only screen</h3>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>
</html>
Mobile view: Vertical column layout with light blue background and orange boxes Desktop view: Horizontal row layout with light green background and coral boxes
Difference Between Screen and Only Screen
| Property | screen | only screen |
|---|---|---|
| Syntax | @media screen |
@media only screen |
| Modern Browsers | Works normally | Same as screen (only is ignored) |
| Legacy Browsers | May apply partial styles | Prevents unintended style application |
| Use Case | General screen targeting | Better backward compatibility |
Conclusion
In modern web development, screen and only screen function identically since current browsers ignore the only keyword. The only keyword was primarily useful for preventing older browsers from misinterpreting media queries, making it a legacy compatibility feature.
4K+ Views
