隨著互聯(lián)網(wǎng)的快速發(fā)展，以及html5+css3的迅速崛起。漸漸的響應(yīng)式布局，也會慢慢的出現(xiàn)在我們的視野里，身為專業(yè)的web前端人員，還不學(xué)習(xí)新技術(shù)你就out啦！為什么這樣說呢？因為響應(yīng)式布局能同時兼容多個終端，比如（手機、平板、PC）做一個網(wǎng)站轉(zhuǎn)眼間就可以變成3個網(wǎng)站，和現(xiàn)在相比是不是更加具有優(yōu)勢呢!
可能有些人對“什么是響應(yīng)式布局”還不是很了解，下面就跟大家簡單說下什么是響應(yīng)式布局：
響應(yīng)式布局：簡單點說，就是做一個網(wǎng)站同時能兼容多個終端，由一個網(wǎng)站轉(zhuǎn)變成多個網(wǎng)站，為我們大大節(jié)省了資源。
那么響應(yīng)式布局的優(yōu)點和缺點又有哪些呢？
優(yōu)點：1.面對不同分辨率設(shè)備靈活性強
2.能夠快捷解決多設(shè)備顯示適應(yīng)問題
缺點：不能完全兼容所有瀏覽器，代碼累贅，加載時間加長。
說了這么多，可能還有很多人，不明白響應(yīng)式布局該怎么去做，以及它的開發(fā)原理是什么？
原理：簡單點說響應(yīng)式布局它是通過CSS中Media Query（媒介查詢）@media功能，來判斷我們的終端設(shè)備寬度在多少像素內(nèi)，然后就執(zhí)行與之對應(yīng)的CSS樣式。
下面我就以我最近做的一個簡單的響應(yīng)式布局框架為案列給大家講講：
代碼如下：
通過上面代碼可知：它是通過@media媒介查詢判斷來執(zhí)行的CSS樣式，也就是說：如果我要做一個響應(yīng)式布局網(wǎng)站，同時兼容手機、平板、PC的話就得寫三個與之對應(yīng)的CSS樣式，通過@media媒介查詢來完成響應(yīng)式布局。
值得注意的是：在手機設(shè)備上，我們要禁止用戶來縮放屏幕。不禁止的話，可能在顯示上會造成錯位，以及顯示的不是手機網(wǎng)站的樣式。所以，我們要通過代碼來禁止用戶在手機端上縮放屏幕，已達到正常的手機網(wǎng)站效果。
禁止代碼如下:
<metaname=“viewport” content=“width=device-width; initial-scale=1.0”>
加在頭部標簽里
寫在最后：以上純屬個人對響應(yīng)式布局的理解，隨著技術(shù)的更新，我們還不學(xué)習(xí)一些新技術(shù)，那么等待我們的就是淘汰。
