我應該在響應式網頁設計中使用哪種媒體類型？

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確實很有意義。對於真正的基本東西，它並不重要。