left
center
right
響應式布局：簡單點說，就是做一個網站同時能兼容多個終端，由一個網站轉變成多個網站，為我們大大節省了資源。
那么響應式布局的優點和缺點又有哪些呢？
優點：
1、面對不同分辨率設備靈活性強
2、能夠快捷解決多設備顯示適應問題
缺點：不能完全兼容所有瀏覽器，代碼累贅，加載時間加長。
說了這么多，可能還有很多人，不明白響應式布局該怎么去做，以及它的開發原理是什么？
原理：簡單點說響應式布局它是通過CSS中Media Query（媒介查詢）@media功能，來判斷我們的終端設備寬度在多少像素內，然后就執行與之對應的CSS樣式。
比如我們公司最近做的逸合投資房地產的項目中，就用到了響應式布局。
下面就以我做的簡單的響應式布局框架為案列給大家講解一下：
代碼如下：
文匯傳媒_響應式布局 header
通過上面代碼可知：它是通過@media媒介查詢判斷來執行的CSS樣式，也就是說：如果我要做一個響應式布局網站，同時兼容手機、平板、PC的話就得寫三個與之對應的CSS樣式，通過@media媒介查詢來完成響應式布局。
值得注意的是：在手機設備上，我們要禁止用戶來縮放屏幕。不禁止的話，可能在顯示上會造成錯位，以及顯示的不是手機網站的樣式。所以，我們要通過代碼來禁止用戶在手機端上縮放屏幕，已達到正常的手機網站效果。
禁止代碼如下:
以上是個人對響應式布局的基本理解與操作，要想寫好響應式布局還需多加練習。
上一篇： 給大家分享一個簡單的tab菜單特效
下一篇： rem是什么？
關鍵詞:
