我应该在响应式网页设计中使用什么媒体类型？答案

【问题标题】：What media type should I use in Responsive Web Design?我应该在响应式网页设计中使用什么媒体类型？
【发布时间】：2012-02-26 08:31:09
【问题描述】：

我在媒体查询中看到一些使用“only screen”，其他使用“all”，其他使用“screen and print”，其他使用“screen”（没有“only”），其他没有指定媒体输入。

我不打算将特定的 CSS 用于打印或其他媒体。我应该使用“仅屏幕”吗？我不应该指定媒体类型吗？

大多数人使用什么媒体类型，为什么？

【问题讨论】：

响应式网页设计没有标准，也不是标准。这些天来做这件事很酷。
@BoltClock 但大多数人使用的是什么媒体类型，为什么？
没有媒体类型，就像“web 2.0”没有媒体类型一样
@Diodeus: Media types
好吧，我应该说没有“特殊”媒体类型。

标签： html css media-queries responsive-design

【解决方案1】：

IMO 将所有样式放在一个样式表中更容易且性能更好：

<link rel=stylesheet href="style.css">

然后你可以在上升时覆盖：

/* put mobile-friendly first (before media queries) */ 

@media screen and (min-width:481px) {
    /* ... */
}

@media screen and (min-width:961px) {
    /* ... */
}

@media print {
    /* print-specific overrides */ 
}

结帐H5BP 和320 and up。

您可以使用screen 或all。如果您要添加仅适用于屏幕的背景图像等内容，那么使用screen 绝对有意义。对于真正的基本东西来说，这并不重要。

【讨论】：

【解决方案2】：

基本上：

要么使用media="screen" 将你的主样式表应用到所有浏览器，或者如果你不关心打印，则完全省略media 属性
如果您确实关心打印，请使用 media="print" 应用您的打印样式表
如果您愿意，请将 only 关键字仅用于媒体查询，例如 screen and (max-width: 1000px) 用于您的响应式样式（此处没有任何正确、错误或标准可遵循）

only 关键字的引入主要是为了阻止旧版浏览器应用适用于其他设备的样式表，例如智能手机和平板电脑上的现代浏览器。见the Media Queries spec。

不要在主样式表中使用media="only screen"。如果这样做，IE8 和更早版本将完全忽略您的主样式表，并且您的网站在这些版本中将显示为无样式。

对于某些背景：the HTML 4 spec 要求媒体“类型”（或媒体描述符）如下：

<link rel="stylesheet" media="screen and (max-width: 1000px)" href="resp.css">

应该在忽略 and ... 部分的情况下进行解析，因此它相当于：

<link rel="stylesheet" media="screen" href="resp.css">

意味着它适用于不支持 CSS3 媒体查询的旧浏览器，但确实完全支持 CSS2 媒体类型。这可能会导致不必要的副作用，例如在旧版桌面浏览器中应用的移动样式表。

然而，根据我的经验，这从未发生过；据我所知，IE7 和 IE8 只是将 screen and (max-width: 1000px) 视为无效的媒体描述符并完全忽略该样式表。

但为了安全起见，我希望将 only 关键字放在专门供现代浏览器使用的媒体查询中。

当然，为了与 CSS3 中的媒体查询兼容，HTML5 中已更改此规则。它只是不适用于在 HTML5 工作开始之前发布的旧版浏览器。

【讨论】：