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

在CSS中，媒体查询在创建响应式网页设计方面起着重要作用。如今，响应式设计已经成为每个网站吸引访问者的重要因素之一。

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

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

在媒体查询中，什么是屏幕？

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

语法

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

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

在上面的语法中，使用条件来设置不同设备的断点。

示例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>在CSS中使用@media规则制作响应式网页设计</h3>
        <h4>将屏幕宽度设置为小于1200个像素以更改样式</h4>
        <div class="text">
            This is a test div element.
        </div>
    </body>
</html>

媒体查询中的“only screen”是什么？

在CSS中编写媒体查询时，我们还可以在“screen”关键字中使用“only”关键字。当我们使用“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>在CSS中使用@media规则制作响应式网页设计</h2>
        <h3>将屏幕宽度设置为小于680像素以更改样式</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代码 */ }
目标	它针对所有设备，例如智能手机、桌面计算机、平板电脑等。	它针对除了不支持媒体类型和要素（如扫描仪或打印机）的所有设备。