Question

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

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

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

Answer 1

基本上：

使用media="screen"将主样式表应用于所有浏览器，或者如果您不关心打印，则完全省略media属性
如果您关心打印，请使用media="print"来应用打印样式表
如果您愿意，请仅为only等媒体查询添加screen and (max-width: 1000px)关键字作为响应式广告（此处没有任何正确，错误或标准）< / p>

引入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关键字放在专门供现代浏览器使用的媒体查询中。

当然，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 and up。

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

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

2 个答案: