CSS3中媒體查詢的最佳做法是什麼？

Question

我在尋找答案，關於CSS3功能的一些問題 - Media Queries：

1. 哪種方法更好爲聲明CSS規則不同分辨率（用於瀏覽器由於性能）？

   //this in head: 
   <link rel="stylesheet/less" href="/Content/site1024.less" media="screen and (max-width: 1024px)" /> 
   
   //or this in css file: 
   @media only screen and (max-width: 1024px){ 
       //styles here 
   } 
   

2. 是什麼max-device-width和max-width區別？它是僅針對移動設備（max-device-width）還是臺式機（max-width）瀏覽器的規則？

3. 如果我爲分辨率爲1280x800的平板電腦編寫媒體查詢規則，用戶也可以使用縱向/橫向模式，它應該如何顯示？我應該寫規則max-width: 800px和max-width: 1280px還是有另一種方法？

4. 如果我寫的規則我應該寫這樣的事：

   <link ... media="only screen and (min-device-width: 481px) and (max-device-width: 1024px)... /> 
   

   或代替這二：

   <link ... media="only screen and (max-device-width: 480px) ... /> 
   <link ... media="only screen and (max-device-width: 1024px) ... /> 
   

---

附：請原諒任何拼寫或語法錯誤，英語不是我的第一語言

P.S.S.在我發佈這個問題之前，我花了一段時間在stackoverflow上搜索，並沒有找到關於這個問題的信息。如果我錯了，有類似的問題，我會刪除我的帖子。

Answer 1

1. css文件中的規則，以減少請求數（更好的性能）。

2. • max-width是目標顯示區域

   • max-device-width的寬度被該設備的整個渲染區域

3. 的另一種方式我知道的寬度以目標人像或風景爲目的添加orientation這樣：

/* portrait */ 
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation: portrait) { 
    /* styles here */ 
} 

/* landscape */ 
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation: landscape) { 
    /* styles here */ 
} 

4. 要定義用於移動設備的樣式表，其寬度必須編寫像素320和480之間：

<link rel="stylesheet" media="screen and (min-width: 320px) and (max-width: 480px)" href="mobile.css"> 

// 1等號缺失，< 6個字符的限制。 Mods，請刪除它。謝謝

Answer 2

我正在尋找關於響應式設計中最佳實踐的良好信息，我會給你一個建議。

This question開發人員在使用CSS肖像條件時出現問題，並在選擇文檔的輸入文本時出現鍵盤。我不知道爲什麼，但它打破了肖像狀況。

在This website當您創建媒體查詢時，您可以找到有關更好實踐的信息，我認爲這是最好的。 Personaly我會在我的網站中使用Exclusive類型的媒體查詢。

但是另一方面，您可以按照This site recomendations。我認爲他們是對的，但我更喜歡自己創建和使用流行的設備維度媒體查詢。

下面的列表：

• < 480像素（這適用於年齡較大的，更小的智能電話的屏幕尺寸）
• < 768px，這是理想的較大智能手機和較小的片劑

• 768px ，適用於大型平板電腦屏幕和桌面屏幕等更大的應用。

此外，這些可太習慣，如果你有精力和時間：

• < 320像素，這是偉大的舊的小的，低分辨率的手機

• 用於桌面上寬屏幕的1024px樣式表。

我希望它能幫助你。