優化小屏幕所需的CSS媒體查詢？

Question

我還沒有接觸過很多CSS媒體查詢;我基本上是通過實驗學習。我正在嘗試優化我的網站以在所有設備上看起來不錯。如果瀏覽器寬度很大（桌面設備，包括Retina顯示屏），如果是平板電腦（包括iPad或其他包括Retina在內的其他CSS文件）以及用於小屏幕的其他CSS文件，我希望它使用特定的CSS文件（iPhone或其他，包括Retina）。我目前的設置包含在下面，以及它們的結果。

<link rel="stylesheet" type="text/css" href="stylesheets/prevhome.css" /> <!--Desktop --> 
<link rel="stylesheet" type="text/css" media="screen and (max-device-width : 1024px), screen and (-webkit-min-device-pixel-ratio: 2)" href="stylesheets/tablet.css" /> <!-- Tablet --> 
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 640px), screen and (-webkit-min-device-pixel-ratio: 2)" href="stylesheets/phone.css" /> <!-- Phone --> 

這適用於臺式機大，但Retina顯示屏的MacBook Pro使用電話CSS文件，而不是桌面之一。 iPad顯示優化版的平板電腦，但Retina顯示屏iPad使用電話優化的CSS文件。 iPhone使用Phone CSS文件顯示出很好的頁面，而Retina顯示iPhone也很棒。我不知道我的網站在其他設備上的顯示效果，因爲我只能使用Apple設備進行測試。

所以，我的CSS鏈接顯然設置不正確。我該如何正確設置？除了Retina顯示器之外，我不想針對任何特定設備。 Windows平板電腦應該使用平板電腦的CSS文件，而不僅僅是iPad。這可以通過3個CSS鏈接和3個文件完成，一個用於桌面（大於1024像素？），一個用於平板電腦（小於1024像素），另一個用於手機（小於640像素）？或者我必須做這些鏈接，然後爲每個Retina設備，rMBP，iPad和iPhone創建一個鏈接？甚至創建超過3個CSS文件？

Answer 1

你並不需要檢測Retina顯示屏，只是檢測device-width：

<link rel="stylesheet" type="text/css" href="stylesheets/prevhome.css" /> <!--Desktop --> 
<link rel="stylesheet" type="text/css" media="screen and (device-width : 1024px)" href="stylesheets/tablet.css" /> <!-- Tablet --> 
<link rel="stylesheet" type="text/css" media="screen and (device-width: 640px)" href="stylesheets/phone.css" /> <!-- Phone --> 

對於網絡性能的原因，所有這一切都可以用一個CSS文件來完成，與@media (...) { selector1 { property: value; } }在媒體的規則塊而不是有條件地加載1到3個文件。

Answer 2

與你原來的CSS鏈接的問題是，你有兩個條件（以逗號標誌着交替），但你沒有提供的僞代碼中的二線

<link rel="stylesheet" type="text/css" href="stylesheets/prevhome.css" /> <!--Desktop --> 
<link rel="stylesheet" type="text/css" media="screen and (max-device-width : 1024px), screen and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2)" href="stylesheets/tablet.css" /> <!-- Tablet --> 
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 640px), screen and (max-device-width: 640px) and (-webkit-min-device-pixel-ratio: 2)" href="stylesheets/phone.css" /> <!-- Phone --> 

原路段上的任何條件寬度可以須寫

「畫面用的2的最小器件的像素比例的1,024像素x OR屏幕最大寬度」

這就是爲什麼在視網膜的MacBook被加載電話和平板電腦風格

當然，因爲你不加載了更高的像素密度時的具體/不同的樣式表，你原來的鏈接可以寫成原樣

<link rel="stylesheet" type="text/css" href="stylesheets/prevhome.css" /> <!--Desktop --> 
<link rel="stylesheet" type="text/css" media="screen and (max-device-width : 1024px)" href="stylesheets/tablet.css" /> <!-- Tablet --> 
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 640px)" href="stylesheets/phone.css" /> <!-- Phone --> 

這在功能上等同。