隨著互聯(lián)網(wǎng)時(shí)代的發(fā)展，我們對(duì)網(wǎng)頁(yè)布局有了新的要求，大氣，美觀，能夠在不同的設(shè)備上呈現(xiàn)令人煥然一新的效果。此時(shí)，一個(gè)全新的概念—響應(yīng)式布局應(yīng)運(yùn)而生。它的誕生為我們的移動(dòng)端布局帶來(lái)了很大的便利。因此學(xué)習(xí)響應(yīng)式頁(yè)面布局勢(shì)在必行！
html5/css3響應(yīng)式布局介紹及設(shè)計(jì)流程，利用css3的media query媒體查詢(xún)功能。移動(dòng)終端一般都是對(duì)css3支持比較好的高級(jí)瀏覽器不需要考慮響應(yīng)式布局的媒體查詢(xún)media query兼容問(wèn)題
一、響應(yīng)式頁(yè)面布局的概念
響應(yīng)式布局是ethan marcotte在2010年5月份提出的一個(gè)概念，簡(jiǎn)而言之，就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。這個(gè)概念是為解決移動(dòng)互聯(lián)網(wǎng)瀏覽器而誕生的。
二、響應(yīng)式布局的優(yōu)勢(shì)
響應(yīng)式布局可以為不同終端的用戶(hù)提供更加舒適的界面和更好的用戶(hù)體驗(yàn)，而且隨著目前大屏幕移動(dòng)設(shè)備的普及，用“大勢(shì)所趨”來(lái)形容也不為過(guò)。隨著越來(lái)越多的設(shè)計(jì)師采用這個(gè)技術(shù)，我們不僅看到很多的創(chuàng)新，還看到了一些成形的模式。
一個(gè)普通的自適應(yīng)顯示的三欄網(wǎng)頁(yè)，當(dāng)你用不同的終端來(lái)查看這個(gè)頁(yè)面的時(shí)候，他會(huì)根據(jù)幾種終端來(lái)顯示不同的樣式，在電腦上是三列，在pad上應(yīng)該也是 三列，在大屏手機(jī)上是三行，在屏幕小于320的手機(jī)上只顯示主要內(nèi)容，隱藏掉了次要元素。(這里關(guān)于響應(yīng)式布局還有個(gè)比較好的消息，就是拖動(dòng)瀏覽器也可以 觸發(fā)判斷條件，測(cè)試的時(shí)候你不需要去找一堆手機(jī)，只要把自己的瀏覽器窗口縮小到一定尺寸就可以了。)
我們認(rèn)識(shí)下media query屬性吧。
@media screen and(min-width: 320px) and (max-width : 479px)
就從這個(gè)條件語(yǔ)句開(kāi)始介紹，media屬性后面跟著的是一個(gè) screen 的媒體類(lèi)型(上面說(shuō)過(guò)的十種媒體類(lèi)型之一)。然后用 and 關(guān)鍵字來(lái)連接條件(其他關(guān)鍵字還有 not， only，看字面大家能理解，就不多說(shuō)。)，然后括號(hào)里就是一個(gè)媒體查詢(xún)語(yǔ)句，稍微懂點(diǎn)css的同學(xué)都能看懂，這個(gè)條件語(yǔ)句意思是在大于320小于479 的分辨率下所激活的樣式表。
這個(gè)語(yǔ)句，就是響應(yīng)式布局的基礎(chǔ)應(yīng)用了。在判斷終端分辨率大小之后，賦予不同的樣式進(jìn)去，就像我們的例子里
@media screen and(max-width : 320px){
body{...}
}
@media screen and(min-width: 800px) and (max-width: 1024px){
body{...}
}
至于要判斷多少種分辨率，完全取決于你產(chǎn)品的需求，常見(jiàn)的分辨率有手機(jī)，平板(注意這些終端是存在 橫屏 豎屏 區(qū)別的,這個(gè)下一篇里提)，桌面顯示器。自己為自己所面對(duì)的終端定制樣式。
一般大于960的顯示器都可以用默認(rèn)樣式而不必在媒體查詢(xún)里判斷了。有一種情況除外，就是高像素比的終端，比如 iphone4以上的retina屏，一個(gè)iphone5的小小的屏幕(iphone的屏幕是真小啊)，他的分辨率竟然達(dá)到了1136*640，幾乎等于 一個(gè)筆記本的分辨率。你在這樣小的物理顯示界面打開(kāi)一個(gè)網(wǎng)頁(yè)，他用1136的分辨率來(lái)顯示，結(jié)果就是所有元素小的可憐。
在面對(duì)這種分辨率精細(xì)的終端，我們有另外一個(gè)條件查詢(xún)語(yǔ)句device-pixel-ratio。
比如例子里的
@media only screen and(-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio:2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and(min-device-pixel-ratio: 2)
就是判斷終端的像素比是2的話，所渲染的樣式。iphone4以上像素比是2，高分辨率andriod設(shè)備像素比是1.5，例子里只有像素比為2的查詢(xún)，1.5的或者其他比例方法一樣，前面用的是幾種瀏覽器的私有屬性，最后一種是通用屬性，
@media only screen and(-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio:2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and(min-device-pixel-ratio: 2)
等于
@media only screen and(min-device-pixel-ratio: 2)
為了一些版本的兼容性，不得已寫(xiě)的長(zhǎng)了。
body{
font-size:24px;
}
.box2{
background: url(d/20.png)#ccc;
background-size:50%;
}
在像素比為2的終端里這樣寫(xiě)的目的，就是讓他顯示的更容易識(shí)別，一般來(lái)說(shuō)顯示一張1px的背景圖片，我們要準(zhǔn)備一張2px的，然后再background-size:50%這樣。1.5像素比同例。
比如上面的demo，如果你用iphone4以上的蘋(píng)果手機(jī)來(lái)看，中間的背景圖片應(yīng)該是顯示“2.0像素比”。
這里也暴露了響應(yīng)式一個(gè)很大的缺點(diǎn)：需要多做若干背景圖(作為內(nèi)容顯示的圖片暫時(shí)無(wú)視，彈性圖片與彈性字體，下次單獨(dú)寫(xiě)一篇介紹博文介紹)。
對(duì)于media query的兼容性，我想不是很重要，因?yàn)楹苌儆薪K端自帶ie9以下的瀏覽器?；径际歉呒?jí)瀏覽器。如果特殊需要，可以下載一個(gè)兼容的js文件
以條件注釋的方式加在文件里。
html5/css3響應(yīng)式頁(yè)面的設(shè)計(jì)流程
第一步：確定需要兼容的設(shè)備類(lèi)型、屏幕尺寸
通過(guò)用戶(hù)研究，了解用戶(hù)使用的設(shè)備分布情況，確定需要兼容的設(shè)備類(lèi)型、屏幕尺寸。
設(shè)備類(lèi)型：包括移動(dòng)設(shè)備(手機(jī)、平板)和pc。對(duì)于移動(dòng)設(shè)備，設(shè)計(jì)和實(shí)現(xiàn)的時(shí)候注意增加手勢(shì)的功能。
屏幕尺寸：包括各種手機(jī)屏幕的尺寸(包括橫向和豎向)、各種平板的尺寸(包括橫向和豎向)、普通電腦屏幕和寬屏。
需要考慮的問(wèn)題：
某個(gè)頁(yè)面進(jìn)行響應(yīng)式設(shè)計(jì)時(shí)其適用的尺寸范圍是哪些?比如，1688搜索結(jié)果頁(yè)面，跨度可以從手機(jī)到寬屏，而1688首頁(yè)，由于結(jié)構(gòu)過(guò)于復(fù)雜，想直接遷移到手機(jī)上，不太現(xiàn)實(shí)，不如直接設(shè)計(jì)一個(gè)手機(jī)版的首頁(yè)。
結(jié)合用戶(hù)需求和實(shí)現(xiàn)成本，對(duì)適用的尺寸進(jìn)行取舍。比如一些功能操作的頁(yè)面，用戶(hù)一般沒(méi)有在移動(dòng)端進(jìn)行操作的需求，沒(méi)有必要進(jìn)行響應(yīng)式設(shè)計(jì)。
第二步：制作線框原型
針對(duì)確定下來(lái)的幾個(gè)尺寸分別制作不同的線框原型，需要考慮清楚不同尺寸下，頁(yè)面的布局如何變化，內(nèi)容尺寸如何縮放，功能、內(nèi)容的刪減，甚至針對(duì)特殊的環(huán)境作特殊化的設(shè)計(jì)等。這個(gè)過(guò)程需要設(shè)計(jì)師和前端開(kāi)發(fā)人員保持密切的溝通。
第三步：測(cè)試線框原型
將圖片導(dǎo)入到相應(yīng)的設(shè)備進(jìn)行一些簡(jiǎn)單的測(cè)試，可幫助我們盡早發(fā)現(xiàn)可訪問(wèn)性、可讀性等方面存在的問(wèn)題。鄭州悅美整形美容醫(yī)院 www.ymzxyy.cn
第四步：視覺(jué)設(shè)計(jì)
注意，移動(dòng)設(shè)備的屏幕像素密度與傳統(tǒng)電腦屏幕不一樣，在設(shè)計(jì)的時(shí)候需要保證內(nèi)容文字的可讀性、控件可點(diǎn)擊區(qū)域的面積等。鄭州展覽公司 www.zongchi.net
第五步：前端實(shí)現(xiàn)
與傳統(tǒng)的web開(kāi)發(fā)相比，響應(yīng)式設(shè)計(jì)的頁(yè)面由于頁(yè)面布局、內(nèi)容尺寸發(fā)生了變化，所以最終的產(chǎn)出更有可能與設(shè)計(jì)稿出入較大，需要前端開(kāi)發(fā)人員和設(shè)計(jì)師多溝通。