Css “与”的区别是什么；屏幕“；及；“仅屏幕”；在媒体查询中？

在媒体查询中，

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" />

@介质（最大宽度：632px）

@仅媒体屏幕和（最大宽度：632px）

要为许多屏幕较小的智能手机设计风格，您可以写：

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

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

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

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

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

---

阅读本文了解更多信息

让我们逐一分析您的示例

@media (max-width:632px)

这句话的意思是，对于

最大宽度为632px的窗口，您希望应用这些样式。在大多数情况下，在这种尺寸下，你会谈论任何比桌面屏幕小的东西

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

这句话的意思是，对于具有
屏幕
和
最大宽度
为632px的窗口的设备，应用该样式。这与上述内容几乎相同，只是您指定的是
屏幕
，而最常见的另一个是
打印

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

这里引用W3C的一段话来解释这一点

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

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

下面是该页面上示例9中显示的示例

希望这能为媒体的质疑提供一些线索

编辑：

请务必查看仅
关键字是如何处理的。
以下内容来自


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

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

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

media="only"

因为没有仅作为的媒体类型，所以样式表被忽略。类似地，旧浏览器应该解释

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

作为

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

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

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

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


所以，使用

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

及

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

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

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

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

相对于

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

以确保它不会被解释为

media="screen"

对于有权进入设备实验室的人来说，这将是一个很好的测试。
由@hybrid给出的答案信息量很大，只是它没有解释@ashitaka提到的目的“如果您使用移动优先的方法怎么办？因此，我们首先使用移动CSS，然后使用最小宽度来定位更大的站点。我们不应该在这个上下文中使用唯一的关键字，对吗？"

我想在这里补充一点，目的只是为了防止不支持浏览器使用其他设备样式，就好像它从“屏幕”开始，而不从“屏幕”开始一样，它将作为屏幕，而如果它从“仅”开始，样式将被忽略

回答阿希塔卡考虑这个例子


如果我们不使用“only”，它仍然可以工作，因为桌面样式也将用于android样式，但会带来不必要的开销。在这种情况下，如果浏览器不支持，它将退回到第二个样式表，忽略第一个样式表。
@media screen and（最大宽度：480px）{…}

screen
此处用于设置媒体查询的屏幕大小。例如，显示区域的最大宽度为480px。因此，它指定的屏幕与其他可用媒体类型不同

@仅媒体屏幕和（最大宽度：480px；）{…}

仅屏幕
此处用于防止不支持具有媒体功能的媒体查询的旧浏览器应用指定的样式。
我仍然不太清楚。我也更新了我的问题。你能举个例子吗？如果你使用移动优先的方法怎么办？因此，我们先使用移动css，然后使用最小宽度来针对更大的网站。我们不应该在这种情况下只使用
关键字，对吗？这个答案很容易理解！：）唯一的办法就是不让旧版本（如IE 6或opera 5或6）加载必须为Android或Chrome 30或IE 10提供的数据。出色的答案sandeep:）应该得到+1的奖励想要更好地解释为什么
only
关键字会在旧浏览器中隐藏样式表，请参见下面@hybrid的答案。他解释得很好。hybrid的答案很好，但我也喜欢这个答案，因为它在CSS中处理媒体查询，而不是只处理
l的
媒体
属性墨水
元素。什么设备没有屏幕？@Kokodoko不需要屏幕的设备。但说真的，打印机和屏幕阅读器不一定有屏幕。加上目前或将来不确定为
屏幕
的任何其他设备，例如列出的任何设备