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