媒体查询中的 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)
最佳答案
让我们一一分解您的示例。
@media (max-width:632px)
这是一个
max-width 为 632px 的窗口，你想应用这些样式。在大多数情况下，在那个尺寸下，您会谈论比桌面屏幕更小的任何东西。@media screen and (max-width:632px)
这个是说对于具有
screen 的设备和具有 632px 的 max-width 的窗口应用样式。这几乎与上述相同，除了您指定 screen 而不是 other available media types 最常见的另一个是 print 。@media only screen and (max-width:632px)
这是直接来自 W3C 的引文来解释这一点。
由于没有“only”这样的媒体类型，旧浏览器应该忽略样式表。
这是该页面示例 9 中显示的 link to that quote。
希望这对媒体查询有所启发。
编辑:
请务必查看 @hybrids excellent answer，了解如何真正处理
only 关键字。关于css - 媒体查询中的 "screen"和 "only screen"有什么区别？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8549529/