1 響應(yīng)式布局介紹

不管您的用戶使用何種終端訪問(wèn)您的網(wǎng)站嘉汰，都能夠自動(dòng)識(shí)別適應(yīng)終端設(shè)備的分辨率以及寬度瓢棒，讓您的網(wǎng)站在眾多設(shè)備中無(wú)縫瀏覽(在CSS2.1中定義了各種媒體類型测摔，包括顯示器暑中、便攜設(shè)備灶体、電視機(jī)钦讳，等等)矿瘦。對(duì)于智能手機(jī)和平板電腦的逐漸普及枕面，普通的網(wǎng)站對(duì)于這些持有移動(dòng)設(shè)備的用戶來(lái)說(shuō)，訪問(wèn)無(wú)疑是困難的缚去，他們必須在設(shè)備上放大和縮小整個(gè)網(wǎng)頁(yè)潮秘，以便能夠閱讀適合字體大小，稍不小心可能會(huì)點(diǎn)錯(cuò)進(jìn)入別的區(qū)域易结，這種狀況在響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)中會(huì)有所改善枕荞。響應(yīng)式布局是就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端，而不是為每個(gè)終端做一個(gè)特定的版本搞动。這個(gè)概念是為解決移動(dòng)互聯(lián)網(wǎng)瀏覽而誕生的躏精，響應(yīng)式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗(yàn)，而且隨著目前大屏幕移動(dòng)設(shè)備的普及鹦肿，可以說(shuō)響應(yīng)式的布局是大勢(shì)所趨玉控，現(xiàn)在越來(lái)越多的網(wǎng)站開(kāi)始采用響應(yīng)式的布局方案。

響應(yīng)式布局的優(yōu)缺點(diǎn)
使用響應(yīng)式布局的優(yōu)點(diǎn)比較明顯狮惜，就是面對(duì)不同分辨率設(shè)備靈活性強(qiáng)高诺，還有就是能夠快捷解決多設(shè)備顯示適應(yīng)問(wèn)題，也就是在非響應(yīng)式web設(shè)計(jì)中碾篡，多設(shè)置中訪問(wèn)視覺(jué)不統(tǒng)一虱而，非最佳視覺(jué)， 而在響應(yīng)式設(shè)計(jì)中能達(dá)到多終端視覺(jué)和操作體驗(yàn)非常風(fēng)格統(tǒng)一开泽。并且可以做到兼容當(dāng)前和未來(lái)設(shè)備牡拇，另外響應(yīng)式web設(shè)計(jì)中的大部分技術(shù)都可以用在WebApp開(kāi)發(fā)中，這是是現(xiàn)在比較流行的開(kāi)發(fā)模式穆律。還可以節(jié)約開(kāi)發(fā)成本惠呼，維護(hù)成本也輕松很多。
當(dāng)然也存在缺點(diǎn)峦耘，像兼容各種設(shè)備工作量大剔蹋，效率低下；代碼累贅辅髓，會(huì)出現(xiàn)隱藏?zé)o用的元素泣崩，加載時(shí)間加長(zhǎng)（相比較手機(jī)定制網(wǎng)站，流量稍大洛口，但比較加載一個(gè)完整pc端網(wǎng)站顯然是小得多）矫付；多方面因素影響而達(dá)不到最佳效果；在一定程度上改變了網(wǎng)站原有的布局結(jié)構(gòu)第焰，會(huì)出現(xiàn)用戶混淆的情況买优。所以是否在你的產(chǎn)品中使用響應(yīng)式布局方案可以折衷考慮。

響應(yīng)式布局該怎么設(shè)計(jì)
一個(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)容瞻佛，隱藏掉了次要元素脱篙。
我們知道，在不同的設(shè)置中伤柄，瀏覽的窗口尺寸可能是不同的绊困。如果只針對(duì)某種窗口尺寸來(lái)制作網(wǎng)頁(yè)，在其他設(shè)備中呈現(xiàn)該網(wǎng)頁(yè)就會(huì)產(chǎn)生很多問(wèn)題适刀， 如果針對(duì)不同的窗口尺寸制作不同的網(wǎng)頁(yè)秤朗，則要制作的網(wǎng)頁(yè)就會(huì)太多。為了解決這個(gè)問(wèn)題在CSS3中加入了Media Queries模塊（媒介查詢）笔喉， 是制作響應(yīng)式布局的一個(gè)利器取视，使用這個(gè)工具我們可以非常方便快捷的制造出各種豐富的實(shí)用性強(qiáng)的界面。Media Queries模塊中允許添加媒體查詢表達(dá)式常挚，用以指定媒體類型作谭，然后根據(jù)媒體類型來(lái)選擇應(yīng)該使用的樣式。換句話說(shuō)奄毡，允許我們?cè)诓桓淖儍?nèi)容的情況下折欠，在樣式中選擇一種頁(yè)面的布局以精確地適應(yīng)不同的設(shè)備， 從而改善用戶體驗(yàn)吼过。網(wǎng)頁(yè)制作者只需要針對(duì)不同的瀏覽器窗口尺寸來(lái)編寫不同的樣式锐秦，然后讓瀏覽器根據(jù)不同的窗口尺寸來(lái)選擇使用不同的樣式即可。

到目前為止盗忱， Media Queries 模塊得到了Firefox瀏覽器酱床、Safari瀏覽器、Chrome瀏覽器以及Opera瀏覽器的支持趟佃。移動(dòng)終端一般都是對(duì)css3支持比較好的高級(jí)瀏覽器不需要考慮響應(yīng)式布局的媒體查詢media query兼容問(wèn)題斤葱。還有IE8及以下版本瀏覽器不支持媒體查詢，雖然也有好多解決方案揖闸，幾乎都是通過(guò)下載JavaScript插件實(shí)現(xiàn)揍堕， 但沒(méi)有必要去解決這個(gè)問(wèn)題，因?yàn)樾∑聊伙@示都是在移動(dòng)端使用汤纸， IE低版本只要按正常電腦頁(yè)面顯示頁(yè)面布局就可以了衩茸。

在開(kāi)發(fā)中只要拖動(dòng)瀏覽器也可以觸發(fā)判斷條件，測(cè)試的時(shí)候你不需要去找一堆手機(jī)贮泞，只要把自己的瀏覽器窗口縮小到一定尺寸就可以了楞慈。另外還有一個(gè)不錯(cuò)的在線Web工具- Responsivator（開(kāi)源的直接在https://github.com/johnpolacek/Responsivator下載）幔烛，提供了很多不同的尺寸屏幕的展示效果，你只需要提供一個(gè)url囊蓝，就可以看到你的網(wǎng)站在不同的屏幕下的顯示效果饿悬。