数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法学媒体查询中“screen”和“only screen”的区别是什么？
在CSS中，媒体查询在创建响应式网页设计中扮演着重要的角色，而如今响应式设计是每个网站吸引访问者所必须具备的重要因素之一。
一般来说，我们可以使用`@media` CSS规则编写媒体查询。但是，我们可以在媒体查询中使用不同的条件和关键字来定位不同的设备，例如移动设备、台式设备、打印机屏幕等。
在本教程中，我们将学习媒体查询中“screen”和“only screen”的区别。
媒体查询中的“screen”是什么？
在CSS中，我们在媒体查询内使用“screen”关键字来定位所有具有屏幕的设备，例如平板电脑、移动设备、台式机、打印机、屏幕阅读器等。
语法
用户可以按照以下语法在媒体查询中使用screen关键字。
@media screen and (condition) {
/* CSS code */
}
在上述语法中，条件用于为不同的设备设置断点。
示例1
在下面的示例中，我们在CSS的媒体查询中使用了screen关键字。我们有一个包含“text”类名的div元素。
在台式机上，body的背景颜色为“aqua”，但对于屏幕尺寸小于1200像素的设备，我们将它更改为“yellow”。此外，我们还更改了小于1200像素设备的div元素的样式。
在输出中，用户可以更改浏览器窗口的大小并观察样式的差异。
<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>
媒体查询中的“only screen”是什么？
在CSS中编写媒体查询时，我们也可以将“only”关键字与“screen”关键字一起使用。当我们使用“only”关键字时，只有当浏览器匹配媒体类型和媒体特性时，它才会应用媒体查询中的样式。
但是，旧版浏览器对“only”关键字有特殊效果。例如，假设旧版浏览器不支持媒体查询和媒体特性。在这种情况下，当设备不匹配媒体类型规范时，它们不应应用媒体查询块中定义的样式。
然而，所有现代浏览器都忽略“only”关键字。
语法
用户可以按照以下语法在媒体查询中使用“only”关键字。
@media only screen and (condition) {
/* CSS code */
}
示例2
在下面的示例中，我们定义了“multiple”div元素，其中包含五个“single”div元素。我们已经为“multiple”和“single”div元素设置了样式。
此外，我们还使用了媒体查询来为宽度小于680像素的设备设置网页样式。用户可以更改浏览器窗口的大小并观察“single”和“multiple”div元素设计的差异。
<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>
媒体查询中“screen”和“only screen”的区别？
在这里，我们在差异表中解释了媒体查询中“screen”和“only screen”的区别。
| 属性 | “screen”媒体类型 | “only screen”媒体类型 |
| 语法 | @media screen { /* CSS代码 */ } | @media only screen { /* CSS代码 */ } |
| 目标 | 它定位所有设备，例如智能手机、台式机、平板电脑等。 | 它还定位所有设备，但不包括不支持媒体类型和特性的设备，例如扫描仪或打印机。 |
用户学习了“screen”和“only screen”媒体类型的区别。“only”关键字在现代浏览器中没有影响，因为它总是忽略“only”关键字，但在旧版浏览器中它很有用。
3K+ 浏览量
