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

Question

媒体查询中“屏幕”和“仅屏幕”之间有什么区别？媒体查询screen和only screen媒体查询之间有什么区别？<link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /><link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" />我们为什么要使用only screen？难道screen不是本身提供足够的信息来渲染只用于屏幕？我见过许多使用以下三种不同方式的响应式网站：@media screen and (max-width:632px)@media (max-width:632px)@media only screen and (max-width:632px)

Answer 1

以下内容来自Adobe docs。

---

媒体查询规范还提供了关键字only，用于隐藏旧浏览器的媒体查询。比如not，关键字必须出现在声明的开头。例如：

media="only screen and (min-width: 401px) and (max-width: 600px)"

不识别媒体查询的浏览器需要以逗号分隔的媒体类型列表，并且规范说它们应该在不是连字符的第一个非字母数字字符之前截断每个值。因此，旧浏览器应将前面的示例解释为：

media="only"

因为没有这样的媒体类型，所以忽略样式表。同样，旧的浏览器应该解释

media="screen and (min-width: 401px) and (max-width: 600px)"

如

media="screen"

换句话说，它应该将样式规则应用于所有屏幕设备，即使它不知道媒体查询的含义。

不幸的是，IE 6-8未能正确实现规范。

它不是将样式应用于所有屏幕设备，而是完全忽略样式表。

尽管存在这种行为，但仍建议仅在您希望隐藏其他不太常见的浏览器的样式时才为媒体查询添加前缀。

---

所以，使用

media="only screen and (min-width: 401px)"

和

media="screen and (min-width: 401px)"

将在IE6-8中具有相同的效果：两者都将阻止使用这些样式。但是，它们仍将被下载。

此外，在支持CSS3媒体查询的浏览器中，如果视口宽度大于401px且媒体类型为屏幕，则两个版本都将加载样式。

我不完全确定哪些不支持CSS3媒体查询的浏览器需要该only版本

media="only screen and (min-width: 401px)"

而不是

media="screen and (min-width: 401px)"

确保它不被解释为

media="screen"

对于有权访问设备实验室的人来说，这将是一个很好的测试。