響應(yīng)式布局：簡(jiǎn)單點(diǎn)說(shuō)，就是做一個(gè)網(wǎng)站同時(shí)能兼容多個(gè)終端，由一個(gè)網(wǎng)站轉(zhuǎn)變成多個(gè)網(wǎng)站，為我們大大節(jié)省了資源。

那么響應(yīng)式布局的優(yōu)點(diǎn)和缺點(diǎn)又有哪些呢？

優(yōu)點(diǎn)：

1、面對(duì)不同分辨率設(shè)備靈活性強(qiáng)

2、能夠快捷解決多設(shè)備顯示適應(yīng)問(wèn)題      

缺點(diǎn)：不能完全兼容所有瀏覽器，代碼累贅，加載時(shí)間加長(zhǎng)。

說(shuō)了這么多，可能還有很多人，不明白響應(yīng)式布局該怎么去做，以及它的開發(fā)原理是什么？

原理：簡(jiǎn)單點(diǎn)說(shuō)響應(yīng)式布局它是通過(guò)CSS中Media Query（媒介查詢）@media功能，來(lái)判斷我們的終端設(shè)備寬度在多少像素內(nèi)，然后就執(zhí)行與之對(duì)應(yīng)的CSS樣式。

比如我們公司最近做的逸合投資房地產(chǎn)的項(xiàng)目中，就用到了響應(yīng)式布局。

下面就以我做的簡(jiǎn)單的響應(yīng)式布局框架為案列給大家講解一下：

代碼如下：

header




left

center

right





footer

通過(guò)上面代碼可知：它是通過(guò)@media媒介查詢判斷來(lái)執(zhí)行的CSS樣式，也就是說(shuō)：如果我要做一個(gè)響應(yīng)式布局網(wǎng)站，同時(shí)兼容手機(jī)、平板、PC的話就得寫三個(gè)與之對(duì)應(yīng)的CSS樣式，通過(guò)@media媒介查詢來(lái)完成響應(yīng)式布局。

值得注意的是：在手機(jī)設(shè)備上，我們要禁止用戶來(lái)縮放屏幕。不禁止的話，可能在顯示上會(huì)造成錯(cuò)位，以及顯示的不是手機(jī)網(wǎng)站的樣式。所以，我們要通過(guò)代碼來(lái)禁止用戶在手機(jī)端上縮放屏幕，已達(dá)到正常的手機(jī)網(wǎng)站效果。

禁止代碼如下:

以上是個(gè)人對(duì)響應(yīng)式布局的基本理解與操作，要想寫好響應(yīng)式布局還需多加練習(xí)。