CSS3的Media Queries（媒體查詢）在現在的網站開發中已經被應用得越來越頻繁，現在但凡開發新的網站，只要不是布局超復雜的項目，不免都要“順手”做一些響應式布局，盡量以低成本兼容更多的瀏覽器/設備?，F代的移動設備尺寸多樣，對于CSS的兼容問題也層出不窮，本文主要探討Media Queries的分辨順序問題。從粗略的概念視角開始，不涉及具體的技術細節。
常見的Media Queries順序有兩種，第一種是從大到?。?/p>
| /*全局樣式*/ ... @media screen and (max-width: 960px) { ... } /*兼容平板*/ @media screen and (max-width: 640px) { ... } /*兼容手機*/ @media screen and (max-width: 480px) { ... } |
這種順序就是先根據1024px+的屏幕寫一個常規的網站布局，然后再逐步對小一些的屏幕做配置。先兼容平板電腦，再兼容手機。對于我這樣做了很多常規網站的老人來說，這種布局順序做起來是很舒服的。先駕輕就熟地讓網站在PC上實現，我會為最大的容器定一個固定寬度，在PC平臺上覺得布局已經完美了，然后再去考慮移動端的細枝末節。在移動端不想顯示的東西，直接在后面的Media Queries中隱藏掉就是了。
第二種順序是從小到大：
| /*全局樣式*/ ... @media screen and (min-width: 480px) { ... } @media screen and (min-width: 640px) { ... } /*兼容平板*/ @media screen and (min-width: 960px) { ... } /*臺式機*/ |
這種順序是先寫一個偏向手機端的全局樣式表，這樣手機端的菜單以及一些細小的布局都要在全局樣式里面先寫好，然后再進行更加寬的屏幕的詳細布局。這樣開發對CSS的基本功要求要高一些，在寫全局樣式的時候，你就得不斷的考慮在所有平臺上是如何實現的。所有的寬度都要按百分比來考慮，容器的“伸縮性”在一開始就要布局好，而不是像傳統網站那樣先直接來個固定寬度。
另外，我們還要考慮到目前還有相當用戶占有率的IE8/8-瀏覽器是不支持Media Queries的，寫在Media Queries中的樣式表會被IE8/8-瀏覽器無視掉。對于順序一，這個問題基本不存在，被IE忽略掉的樣式表部分正是在用這些老版本的IE的PC上用不到的，所以我們幾乎什么都不用做。
而對于順序二，問題變得稍微復雜一些。眾所周知我們可以添加一個
css3-mediaqueries-js，在老IE中降低一些執行效率（反正效率本來就不高），讓它們自己去兼容Media Queries。也可以再為老IE多寫一個兼容的樣式表，這樣就更加麻煩一些。
于是可以肯定的說，對于開發人員來說順序一的優勢是顯而易見的。然而我們真的就應該拋棄順序二嗎？
對于移動端來說，順序二的優勢還是很大的。越是小的屏幕，用順序二的效率就越高，它不必執行整個樣式表，只要執行到超出屏幕寬度以前那一級就行了，這樣頁面打開的速度就會快一些。想象一下如果一張大的背景圖放在最后一級的Media Queries中，你能為移動端節約多少流量？我們知道速度和流量在當今的移動端還是很敏感的，而在PC上至少沒有移動端那么敏感。
總結：
如果網站的用戶還只集中在PC上，或者網站的受眾面只定位在PC上，或者網站上幾乎沒有圖片加載，或者你是一個沒有追求的前端…那就盡管用順序一去構架你的樣式表吧。
如果要考慮全平臺，那就用順序二，為IE單獨引入一個css3-mediaqueries-js。要相信在開發的時候多費一些心思，用戶會給你更多的回報。
寶雞網站建設公司，外貿營銷型網站定制設計——寶雞市布瑞恩信息科技有限公司
請尊重我們的勞動成果。
