響應(yīng)式網(wǎng)站設(shè)計

說到這個，移動開發(fā)面對的屏幕尺寸那叫一個豐富，其中安卓陣營就夠讓人頭痛的。我們在PC端常用的兩種布局方式就是固定布局和彈性布局，前者設(shè)置一個絕大多數(shù)電腦能正常顯示的固定寬度居中顯示，后者則采用百分比。關(guān)于這兩者討論的文章很多，有興趣的自己查閱下，我今天要介紹的就是相信你已經(jīng)聽過的”響應(yīng)式布局”，響應(yīng)式布局意味著媒體查詢，這個在css2就已經(jīng)出現(xiàn)的東西隨著html5、css3的到來又增添了新的生機。

響應(yīng)式網(wǎng)站設(shè)計并非新的技術(shù)，只不過將已有的開發(fā)技巧（彈性布局、彈性圖片和媒體查詢等）整合在了一起，并命了這個聽起來很牛X的名字——響應(yīng)式網(wǎng)站設(shè)計。猶如當(dāng)年的Ajax一樣，將已有的技術(shù)重新組合發(fā)揮新的作用。

（1）.媒體查詢初探。媒體查詢并非新出現(xiàn)的技術(shù)，如下：

其中就使用了媒體查詢，通過 標(biāo)簽的media屬性為樣式表指定了設(shè)備類型，當(dāng)然CSS3時代的媒體查詢更加豐富。

發(fā)現(xiàn)了他們的區(qū)別嗎？對，不只是針對設(shè)備進行適配，而且加了一個條件，就是當(dāng)設(shè)備縱向放置的時候才匹配，咱們再看一個。

大家會發(fā)現(xiàn)我們又拓展了一個條件，對，就是當(dāng)設(shè)備屏幕的寬度大于960px才會加載style.css樣式文件。我們究竟有哪些特性是可以被探測到的呢？下面列了一部分供大家參考（參考自http://www.w3.org/html/ig/zh/wiki/CSS3媒體查詢）：
- width 視口寬度
- height 視口高度
- device-width 設(shè)備屏幕的寬度
- device-height 設(shè)備屏幕的高度
- orientation 檢測屏幕處于橫屏還是豎屏
- aspect-ratio 基于視口的寬高比例
- device-aspect-ratio 基于設(shè)備屏幕的寬高比
- color 顏色的位數(shù)，如min-color：32 匹配設(shè)備是否有32位或以上的顏色
- color-index 設(shè)備的顏色索引表中的顏色數(shù)
- monochrome 檢測單色振緩沖區(qū)中每像素使用的位數(shù)。為非負(fù)數(shù)，如monochrome：3
- resolution 檢測屏幕或打印機的分辨率，如min-resolution：300dpi(dpi后面會介紹)，也可以是每厘米像素點的度量值，如min-resolution：120dpcm
- scan 掃描方式，值為progressive（逐行掃描）、interlace（隔行掃描）
- grid 檢測輸出設(shè)備是網(wǎng)格設(shè)備還是位圖設(shè)備

創(chuàng)建媒體查詢時，上述特性（scan和grid不行）都可以加上min和max前綴創(chuàng)建媒體查詢的范圍。除了link標(biāo)簽?zāi)軌蜻M行媒體查詢，是不是還有其它的呢，答案是Yes 。html中的meta標(biāo)簽，此前我們常用的應(yīng)該是這個

但是現(xiàn)在我們要說的不是這個，而是這個：

在多數(shù)ios和android設(shè)備的瀏覽器都支持viewport meta元素覆蓋默認(rèn)的畫布縮放設(shè)置。在標(biāo)簽中插入meta標(biāo)簽，設(shè)置相應(yīng)屬性即可，如上代碼，name=”viewport” content中width=device-width表示瀏覽器頁面寬度等于設(shè)備寬度（同理可以設(shè)置高度，也可指定具體值），initial-scale=1表示頁面不縮放保持，mininum-scale=1和maximum-scale=1表示允許用戶最小縮小至原大小和擴大到原大小（實際就是不讓縮放^^），user-scaleable=no 表示禁止縮放, target- densitydpi = high-dpi表示適配高分辨率的屏幕，還可以取值為dpi_value | device-dpi| high-dpi | medium-dpi | low-dpi，后面的四個定性，第一個定量，即dpi_value是DPI值，device-dpi是使用設(shè)備原本的 dpi 作為目標(biāo) dp，不發(fā)生默認(rèn)縮放，而后面的三個是指dpi取值在一定范圍的表示。這里我們先介紹前文出現(xiàn)過的一個名詞dpi，所表示的是每英寸所擁有的像素（pixel）數(shù)目，數(shù)值越高，即代表顯示屏能夠以越高的密度顯示圖像。當(dāng)達到人眼的極限分辨率時，喬幫主給它取了一個很高端的名字——Retina。那么目前市面的手機分辨率是怎樣的一個分布呢，ios大家都知道的，從iphone4時代開始就已經(jīng)是Retina屏了，至于Android可以看下此前Google官方公布的數(shù)據(jù)：

從上面可以看出，高分屏和超分屏已經(jīng)是主流了，具體的適配范圍還是看各自的項目和定位吧。

講了這么多，有人可能會疑惑為什么這些都不是用在CSS中的？別急，慢慢來，現(xiàn)在就介紹如何在樣式中運用，按照上述屏幕分辨率的四種劃分，我們可以看到基本可以舍棄ldpi了。
/* 中分辨率屏幕 */

/*高分辨率屏幕*/

/*超高分辨率屏幕（傳說中的Retina屏）*/

上面就是在css中的用法，把我們需要的css代碼包含在大括號中就能用了，是不是很方便的樣子%>_<%。當(dāng)然我們還可以用到之前提供的幾個特性，如下：

針對視口寬度不大于768像素的情況加載大括號中的樣式。
雖然我們可以把設(shè)備的分辨率可以分為這幾類，但是屏幕的尺寸實在太多，如果針對每一種尺寸寫一種樣式，我覺得設(shè)計師和前端面不用干別的了，因為開發(fā)成本實在太大，而且沒有必要，我們只需要針對絕大多數(shù)的設(shè)備結(jié)合媒體查詢和彈性布局來調(diào)整，減少開發(fā)成本。

轉(zhuǎn)載本文章請關(guān)注！網(wǎng)站建設(shè)選擇北京瑩晨設(shè)計m.algeanandpartners.com，