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

4 回答

• 473

  让我们一个一个地分解你的例子 .

  @media (max-width:632px)
  

  这个是说你想要应用这些样式的 max-width 为632px的窗口 . 在这种情况下，在大多数情况下，你会谈论比桌面屏幕小的任何东西 .

  @media screen and (max-width:632px)
  

  这个是对于具有 screen 的设备和具有 max-width 的632px的窗口应用该样式 . 这几乎与上面相同，除了你指定 screen 而不是other available media types，最常见的另一个是 print .

  @media only screen and (max-width:632px)
  

  以下是W3C直接引用的解释 .

  关键字“only”也可用于隐藏旧用户代理的样式表 . 用户代理必须处理以“仅”开头的媒体查询，就好像“仅”关键字不存在一样 .

  由于没有“仅”这样的媒体类型，旧版浏览器应该忽略样式表 .

  这是该页面上示例9中显示的link to that quote .

  希望这能为媒体查询提供一些启示 .

  编辑：

  请务必查看@hybrids excellent answer，了解如何真正处理 only 关键字 .

  回复于 2024-04-30T23:14:00+08:00
• 201

  以下是Adobe docs .

  ---

  媒体查询规范还提供关键字 only ，用于隐藏旧版浏览器的媒体查询 . 与 not 类似，关键字必须位于声明的开头 . 例如：

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

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

  media="only"
  

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

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

  如

  media="screen"
  

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

  Unfortunately, IE 6–8 failed to implement the specification correctly.

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

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

  ---

  所以，使用

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

  和

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

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

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

  我'm not entirely sure which browsers that don' t支持CSS3媒体查询需要 only 版本

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

  而不是

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

  确保它不被解释为

  media="screen"
  

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

  回复于 2024-04-30T23:14:00+08:00
• 12

  要为许多具有较小屏幕的智能手机设置样式，您可以写：

  @media screen and (max-width:480px) { … }
  

  要阻止旧浏览器查看iPhone或Android手机样式表，您可以写：

  @media only screen and (max-width: 480px;) { … }
  

  阅读这篇文章了解更多http://webdesign.about.com/od/css3/a/css3-media-queries.htm

  回复于 2024-04-30T23:14:00+08:00
• 37

  @hybrid的回答是非常有用的，除了它没有解释@ashitaka提到的目的“如果你使用Mobile First方法怎么办？所以，我们首先使用移动CSS，然后使用min-width来定位更大的网站 . 我们不应该在这种情况下使用唯一的关键字，对吧？“

  想要在这里添加，目的只是为了防止非支持浏览器使用那种其他设备风格，就好像它从“屏幕”开始而没有它将它用于屏幕，就好像它从“仅”风格开始将被忽略 .

  回答ashitaka考虑这个例子

  <link rel="stylesheet" type="text/css" 
    href="android.css" media="only screen and (max-width: 480px)" />
  <link rel="stylesheet" type="text/css" 
    href="desktop.css" media="screen and (min-width: 481px)" />
  

  如果我们不使用“only”它仍然可以工作，因为桌面风格也将使用引人注目的Android风格，但有不必要的开销 . 在这种情况下，如果浏览器不支持它将回退到第二个样式表忽略第一个 .

  回复于 2024-04-30T23:14:00+08:00