媒体查询中的"屏幕"和"仅屏幕"有什么区别?

cssweb developmentfront end technology更新于 2024/4/30 10:52:17

在 CSS 中，媒体查询在创建响应式网页设计中扮演着重要的角色，如今响应式设计是每个网站吸引访客的重要因素之一。

通常，我们可以使用 @media CSS 规则编写媒体查询。但是，我们可以在媒体查询中使用不同的条件和关键字来定位不同的设备。例如，移动设备、桌面设备、打印机屏幕等。

在本教程中，我们将学习媒体查询中"screen"和"only screen"的区别。

媒体查询中的"Screen"是什么?

在CSS中，我们在媒体查询中使用"screen"关键字来定位所有带屏幕的设备，例如平板电脑、移动设备、桌面设备、打印机、屏幕阅读器等。

语法

用户可以按照以下语法在媒体查询中使用screen关键字。

@media screen and (condition) {
    /* CSS 代码 */
}

在上述语法中，条件用于为不同的设备设置断点。

示例 1

在下面的示例中，我们使用了screen 关键字与 CSS 中的媒体查询。我们有一个包含"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 代码 */
}

示例 2

在下面的示例中，我们定义了"multiple"div元素，它包含五个"single"div元素。我们为"multiple"和"single"div元素设置了样式。

此外，我们还使用媒体查询为宽度小于 680 像素的设备设置了网页样式。用户可以改变浏览器窗口的大小，观察单个和多个 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"媒体类型
Syntax	@media screen { /* CSS code */ }	@media only screen { /* CSS code */ }
Targets	它适用于所有设备，例如智能手机、台式电脑、平板电脑等。	它还适用于除不支持媒体类型和功能(例如扫描仪或打印机)的设备之外的所有设备。