CSS媒体查询中的“唯一屏幕”代码是啥意思？ [复制]

Posted 2023-03-06

【中文标题】CSS媒体查询中的“唯一屏幕”代码是啥意思？ [复制]

【英文标题】：What does the 'only screen' code mean in a css media query? [duplicate]CSS媒体查询中的“唯一屏幕”代码是什么意思？ [复制]

【发布时间】：2019-10-05 11:20:27

【问题描述】：

媒体查询中的“唯一屏幕”代码是什么意思？

//See below the 'only screen' part of the code
@media only screen and (min-device-width: 320px)

我使用了在没有“唯一屏幕”部分的情况下工作的代码。它有什么作用或有什么帮助？

【问题讨论】：

那是重复的问题，请看***.com/a/8595600/7412827

【参考方案1】：

@media only screen and (min-device-width: 320px)

正如你所说，代码确实可以在没有 only screen 的情况下运行，但是当你使用它时，这意味着你只针对桌面、笔记本电脑、平板电脑、移动设备等屏幕设备而不是其他屏幕设备媒体设备，例如打印媒体和屏幕阅读器等。

资源：https://www.w3.org/TR/CSS2/media.html

【参考方案2】：

来自https://www.w3schools.com/cs-s-ref/css3_pr_mediaquery.asp

only：唯一关键字阻止不支持的旧浏览器 通过应用指定样式进行的具有媒体功能的媒体查询。 它对现代浏览器没有影响。

screen 关键字表示它是计算机、手机或平板电脑等。还有其他两种媒体类型，print 和speech，以及默认的all。

简单地说：only 关键字是可选的，用于向后兼容。 screen 关键字将默认为 all。