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

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

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

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

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

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

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

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

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

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

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

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

/*高分辨率屏幕*/

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

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

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

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