媒体查询中的“屏幕”和“仅屏幕”有什么区别？

在 CSS 中，媒体查询在创建响应式网页设计中发挥着重要作用，如今响应式设计是每个网站吸引访问者所需的重要内容之一。

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

在本教程中，我们将了解媒体查询中“屏幕”和“仅屏幕”之间的区别。

媒体查询中的屏幕是什么？

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

语法

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

雷雷

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

示例 1

的中文翻译为：

示例 1

在下面的示例中，我们在 CSS 中的媒体查询中使用了 screen 关键字。我们有一个包含“text”类名的 div 元素。

在桌面上，主体的背景颜色为“aqua”，但对于屏幕尺寸小于1200 px的设备，我们将其更改为“yellow”。此外，我们还为小于 1200 px 的设备更改了 div 元素的样式。

在输出中，用户可以更改浏览器窗口的大小并观察样式的差异。

雷雷

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

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

但是，较旧的浏览器具有“only”关键字的特殊效果。例如，假设较旧的浏览器不支持媒体查询和媒体功能。在这种情况下，当设备与媒体类型规范不匹配时，他们不应该应用媒体查询块内定义的样式。

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

语法

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

雷雷

示例2

在下面的示例中，我们定义了“multiple”div 元素，其中包含五个“single”div 元素。我们设计了“多个”和“单个”div 元素的样式。

此外，我们还使用媒体查询为宽度小于 680 像素的设备设计网页样式。用户可以改变浏览器窗口的大小并观察单个和多个div元素的设计差异。

雷雷

媒体查询中的屏幕和仅屏幕之间的区别？

这里我们已经在差异表中解释了媒体查询中分屏和仅分屏的区别

的中文翻译为： 的中文翻译为：

财产	属性	“屏幕”媒体类型	“仅屏幕”媒体类型
语法	语法	@media screen { /* CSS 代码 */ }	@media only screen { /* CSS代码 */ }
目标	它面向所有设备，如智能手机、台式机、平板电脑等。	它还针对所有设备，除了那些不支持扫描仪或打印机等介质类型和功能的设备。

用户了解了“屏幕”和“仅屏幕”媒体类型之间的区别。 “only”关键字在现代浏览器中没有任何影响，因为它总是忽略“only”关键字，但它对于旧版浏览器很有用。

以上是媒体查询中的“屏幕”和“仅屏幕”有什么区别？的详细内容。更多信息请关注PHP中文网其他相关文章！