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

Question

我看到一些在媒体查询中使用“仅屏幕”，其他人使用“全部”，其他人使用“屏幕和打印”，其他人使用“屏幕”（没有“仅”），其他人没有指定媒体类型。

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

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

Answer 1

基本上：

• 要么使用 media="screen" 将主样式表应用到所有浏览器，或者如果您不关心，则完全省略 media 属性print

• 使用 media="print" 来应用您的如果您确实关心打印，请打印样式表

• 如果您愿意，请包含 only 关键字仅适用于媒体查询，例如 screen 和 (max-width: 1000px) 适用于您的响应式样式（此处没有任何正确、错误或标准可供遵循）

only 关键字是引入主要是为了阻止旧浏览器应用适用于其他设备的样式表，例如智能手机和平板电脑上的现代浏览器。请参阅媒体查询规范。

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

---

一些背景知识：HTML 4 规范要求媒体“类型“（或媒体描述符）如下所示：

<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 和 (max-width: 1000px) 视为无效的媒体描述符，并完全忽略该样式表。

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

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

Answer 2

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 及以上。

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