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.
什么是媒体查询中的屏幕？
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
的中文翻译为：示例 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>
媒体查询中唯一的屏幕是什么？
在CSS中编写媒体查询时，我们还可以使用“only”关键字与“screen”关键字一起使用。当我们使用“only”关键字时，它仅在浏览器匹配媒体类型和媒体特性时应用媒体查询中的样式。
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” 媒体类型 | “only screen” 媒体类型 |
| Syntax | 的中文翻译为：语法 | @media screen { /* CSS code */ } | @media only screen { /* CSS代码 */ } |
| 目标 | 它面向所有设备，如智能手机、台式机、平板电脑等。 | 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.
