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

Question

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

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

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

Answer 1

基本上是：

• 要么使用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"> 

这意味着它wou ld适用于不支持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确实很有意义。对于真正的基本东西，它并不重要。