CSS “screen”和“only screen”在媒体查询中的区别是什么

在CSS中，媒体查询在创建响应式网页设计中起着重要作用，而如今响应式设计是每个网站都需要吸引访问者的重要因素之一。

一般来说，我们可以使用@media CSS规则编写媒体查询。然而，我们可以在媒体查询中使用不同的条件和关键字来针对不同的设备。例如，移动设备、桌面设备、打印机屏幕等。

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

在媒体查询中什么是屏幕

在CSS中，我们使用“screen”关键字在媒体查询中来针对所有带屏幕的设备，如平板电脑、手机、桌面电脑、打印机、屏幕阅读器等。

语法

用户可以按照下面的语法来使用媒体查询中的“screen”关键字。

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

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

示例1

在下面的示例中，我们在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>

什么是媒体查询中的唯一屏幕

在CSS中编写媒体查询时，我们还可以在“screen”关键字后使用“only”关键字。当我们使用“only”关键字时，它仅在浏览器匹配媒体类型和媒体特性时才应用媒体查询内的样式。

然而，旧版本浏览器有一个“only”关键字的特殊效果。例如，假设旧版本浏览器不支持媒体查询和媒体特性。在这种情况下，当设备不匹配媒体类型规范时，它们不应用于媒体查询块内定义的样式。

然而，所有现代浏览器都会忽略“only”关键字。

语法

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

@media only screen and (condition) {
   /* CSS code */
}

示例2

在下面的示例中，我们定义了一个包含五个单个div元素的’multiple’ 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在媒体查询中的区别

在下面的表格中，我们解释了屏幕和only screen在媒体查询中的区别。

属性	“screen” 媒体类型	“only screen” 媒体类型
语法	`@media screen { /* CSS 代码 */ }`	`@media only screen { /* CSS 代码 */ }`
目标	它适用于所有设备，如智能手机、桌面电脑、平板电脑等。	它还适用于除不支持媒体类型和功能（如扫描仪或打印机）的设备之外的所有设备。