Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What is the difference between “screen” and “only screen” in media queries?
In CSS, media queries play an important role in creating a responsive web design, and nowadays responsive design is one of the important things every website requires to attract visitors.
In general, we can write media queries using the @media CSS rule. However, we can use the different conditions and keywords in a media query to target different devices. For example, mobile devices, desktop devices, printer screens, etc.
In this tutorial, we will learn the difference between the ‘screen’ and ‘only screen’ in media queries.
What is a Screen in Media Queries?
In CSS, we use the ‘screen’ keyword inside the media queries to target all devices with a screen, such as tablets, mobile, desktops, printers, screen readers, etc.
Syntax
Users can follow the syntax below to use the screen keyword in media queries.
@media screen and (condition) {
/* CSS code */
}
In the above syntax, a condition is used to set the breakpoints for the different devices.
Example 1
In the example below, we have used the screen keyword with the media queries in CSS. We have a div element containing the ‘text’ class name.
On the desktop, the background color of the body is ‘aqua’, but we change it to ‘yellow’ for devices with a screen size of less than 1200 px. Also, we change the style of the div element for devices of less than 1200 px.
In the output, users can change the size of the browser’s window and observe the difference in style.
<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 <i> @media rule </i> in CSS to make a responsive web design </h3>
<h4> Set the screen width less than 1200 pixels to change the style </h4>
<div class = "text">
This is a test div element.
</div>
</body>
</html>
What is the Only Screen in Media Queries?
We can also use the ‘only’ keyword with the ‘screen; keyword while writing media queries in CSS. When we use the ‘only’ keyword, it only applies the style within the media queries if the browser matches the media type and media features.
However, older browsers have the special effect of the ‘only’ keyword. For example, suppose older browsers don’t support the media queries and media features. In that case, they shouldn’t apply the styles defined inside the media query block when the device doesn’t match the media type specifications.
However, all modern browsers ignore the ‘only’ keyword.
Syntax
Users can follow the syntax below to use the ‘only’ keyword in media queries.
@media only screen and (condition) {
/* CSS code */
}
Example 2
In the example below, we have defined the ‘multiple’ div element, which contains five ‘single’ div elements. We have styled the ‘multiple’ and ‘single’ div elements.
Also, we have used media queries to style the webpage for devices with a width of less than 680 pixels. Users can change the size of the browser’s window and observe the difference in the design of the single and multiple div elements.
<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 <i> @media rule </i> in CSS to make a responsive web design </h2>
<h3> Set the screen width less than 680 pixels to change the style </h3>
<div class = "multiple">
<div class = "single"> </div>
<div class = "single"> </div>
<div class = "single"> </div>
<div class = "single"> </div>
<div class = "single"> </div>
</div>
</body>
</html>
Difference Between the Screen and Only Screen in Media Queries?
Here, we have explained the difference between the screen and only screen in media queries in the difference table.
| Property | “screen” media type | “only screen” media type |
| Syntax | @media screen { /* CSS code */ } | @media only screen { /* CSS code */ } |
| Targets | It targets all devices, such as smartphones, desktops, tablets, etc. | It also targets all devices except those that don’t support the media types and features like scanners or printers. |
Users learned the difference between the ‘screen’ and ‘only screen’ media types. The ‘only’ keyword has no impact in modern browsers as it always ignores the ‘only’ keyword, but it is useful for the older browsers' versions.
2K+ Views
To Continue Learning Please Login