响应式网页设计应该使用哪种媒体类型？

Question

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

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

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

Answer 1

基本上：

• 使用media="screen"将主样式表应用到所有浏览器，或者如果你不关心打印就完全省略media属性

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

• 如果你愿意，只为媒体查询添加only关键字，如screen and (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 and (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或all 。 如果您要添加仅适用于屏幕的背景图像，那么使用screen绝对有意义。 对于真正基本的东西，它并不重要。