我們都知道，Media Queries是實現響應式設計的秘密武器。在這篇文章中，將向大家介紹制定高質量的Media Queries需要注意的一些事項

1. 讓內容確定斷點

很多時候，在響應式設計中，你經常看到的斷點值是：320px、480px、768px和1024px等

不要使用流行的設備尺寸（320px是iPhone設備的豎屏尺寸，480是iPhone設備橫向屏幕尺寸，768px是iPad豎向屏幕尺寸，等等）來確定斷點。該設備的屏幕（Device Landscape）是不斷在變化的，所以使用流行設備的尺寸作為斷點，他的實際價值存在的意義可能沒有什么，甚至一年的時間都堅持不到。Web本質是流動的，因此我們的工作是在任何屏幕上創建外觀、功能等，而不是簡簡單單的幾個斷點

2. 對布局作為一種增加

作為一個移動先行響應式設計策略，重要的是我們要有一個移動先行的風格方式

這里當屏幕小于50em的時候，column就會丟棄浮動而且width自適應單欄顯示。而當屏幕大于50em的時候，column就會左浮動而且寬度是50%。從而完成不同分辨率下面的不同展示風格

3. 使用相對單位

我常喜歡背靠著椅子使用我的電腦，所以我經常使用cmd +來放大網站文本。當我們斷點使用的是像素時，頁面放到出現水平滾動條，并沒有正常的工作

不應該使用像素，我們應該為我們的媒體查詢使用相對單位

首先在樣式中，我們都放棄了對像素(px)的使用，在使用em、rem和百分比(%)，那么我們為什么不能將這些相對單位運用到媒體查詢中呢？其次，在媒體查詢中使用相對單位允許瀏覽來調整設計基于用戶縮放的級別，讓用戶有一個更愉快、更容易閱讀的用戶體驗

4. 超越寬度

視窗（Viewport）寬度不是唯一的媒體查詢可檢測的。有很多媒體特性我們可以檢測，包括顏色、顏色指數、縱橫比、寬度以及裝置設備寬度、高度和設計高度、方位、單色、分辨率、掃描、像素密度等等

雖然我不知道這么一大堆的東西是什么，但有幾個真正有用的功能，可以幫助我們

- 使用pix-density可以有條件的提供更大的背景圖、視網膜圖標和高分辨率屏幕

- 使用height可以檢測可用的屏幕高度，并調整相應的樣式風格。例如，在這個網站我想根據高度來擴展我的標題類型

- 使用orientation來檢測屏幕是橫向還是縱向模式。取向可以用于有條件的禁用固定定位，并釋放出屏幕可用空間

5. 不要做得太過火

使用響應式設計，很容易陷入所有媒體查詢的魔法和變得有點瘋狂。雖然媒體查詢非常有趣，但在設計中使用大量的復雜性會讓你變得難堪。我們已經不得不花很多時間去處理這些復雜性：設備屏幕，令人眼花繚亂的瀏覽器和設備，為了讓客戶和隊友使用更加的舒服。我非常喜歡Lyza的建議盡可能少。這絕對是符合我們的利益以及追求簡單的頁面格局

就這樣，現在就開始動手查詢你的媒體查詢

總結

以上是生活随笔為你收集整理的CSS之七个高度有效的媒体查询技巧的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。