響應式布局是什么？
響應式布局就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯網瀏覽而誕生的。
響應式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗。
二、響應式布局的優點和缺點有哪些呢？
(1) 優點 ：1. 面對不同分辨率設備靈活性強
2. 能夠快捷解決多設備顯示適應問題
(2) 缺點 ：1.不能完全兼容所有瀏覽器，代碼累贅，會出現隱藏無用的元素,加載時間加長
2. 一定程度上改變了網站原有的布局結構，會出現用戶混淆的情況。
三、實現原理？
原理：簡單點說響應式布局它是通過CSS中Media Query（媒介查詢）@media功能，來判斷我們的終端設備寬度在多少像素內，然后就執行與之對應的CSS樣式。
四、用示例來實踐一下
<html lang="en"> <head> <meta charset="UTF-8"> <title>響應式布局</title> <style> body { background-color: #ccc; } @media screen and (max-width: 1000px) { body { background-color: red; } } @media screen and (max-width: 800px) { body { background-color:green; } } @media screen and (max-width: 600px) { body { background-color: skyblue; } } @media screen and (max-width: 400px) { body { background-color: yellow; } } </style> </head> <body> 這就是簡單的響應式布局示例 </body> </html> 看完我寫的示例，你可以試着敲一下在瀏覽器里運行，然后縮小瀏覽器窗口，你就會發現網頁的顏色會隨着你的瀏覽器窗口寬度變化而變色，這就是css的媒體查詢功能，根據瀏覽器視口寬度的不同來加載不同的css樣式。
值得注意的是：在手機設備上，我們要禁止用戶來縮放屏幕。不禁止的話，可能在顯示上會造成錯位，以及顯示的不是手機網站的樣式。所以，我們要通過代碼來禁止用戶在手機端上縮放屏幕，已達到正常的手機網站效果。
禁止代碼如下：
<meta name=“viewport” content=“width=device-width; initial-scale=1.0”>（注意的是在頁面的頭部之間加上上面這句。meta viewport這個屬性是在移動設備上設置原始大小顯示和是否縮放的聲明。）
參數設置∶
width – viewport的寬度
height – viewport的高度
initial-scale – 初始的縮放比例
minimum-scale – 允許用戶縮放到的最小比例
maximum-scale – 允許用戶縮放到的最大比例
user-scalable – 用戶是否可以手動縮放
五、注意事項
響應式布局一定要注意以下兩點：
一 是圖片，在移動設備上，要做一些特定適合的小圖片來匹配，如果單純使用壓縮的圖片會失真，影響用戶體驗；
二 是在頭部加入如下代碼，目的是聲明在移動設備上設置原始大小顯示和是否縮放
<meta name=“viewport” content=“width=device-width; initial-scale=1.0”>最后說一下通過媒體查詢來加載不同的css，這是響應式布局的核心，媒體查詢的方法當然也有很多，如果有興趣深入了解，大家也可以自行百度一下。
原創
流式布局與固定布局
常見的面試題會讓你聊一聊流式布局與響應式布局，我還沒遇到過直接問他倆區別的面試官，都是根據我的項目（里面有用到流式布局＋響應式布局）。
圍繞這兩點感覺網上大部分博客都長得差不多，那我就用自己粗淺的理解說一下由此展開的一點問題吧。
說起流式布局首先就要提到的是老掉牙的固定布局：瀏覽器大小不影響內部元素大小。
這不就是各大銀行和國企的PO網站嘛 = = 無論屏幕多大網頁都顯示相同寬度。
在知乎上看到：在移動端開發中其實也可以采用固定布局（有兩種方法） 點擊打開鏈接
由此引入一個知識點viewport
用於移動端，用來設置頁面的大小和縮放比例，沒有為手機設計的網站，通常會使用桌面的寬度來渲染（通常是960px，980px），然后再改變字體的大小和對內容的縮放來使內容適應屏幕。然后你就要使勁拖拽頁面
so bad
但如果設置一個簡單的meta標簽就可以解決這個煩人的問題：
<meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=no;">width=device-width：寬度等於當前設備寬（但會導致iphone、ipad橫豎屏不分）
initial-scale=1.0：初始縮放值為1（會導致IE橫豎屏不分）
這兩條是為了互補，所以總是同時出現。
user-scalable=no：不允許客戶手動縮放（不必須）
所以才會有這兩種解決辦法：
①在viewport meta標簽上設置width=320（因為腎5的width是320），頁面的各個元素也采用px作為單位。通過用JS動態修改標簽的initial-scale使得頁面等比縮放，從而剛好占滿整個屏幕。
②設在viewport meta標簽上設置content"width=640（手機寬度都是小於640的）,user-scalable=no，頁面的各個元素也采用px作為單位。由於640px超出了手機寬度，瀏覽器會自動縮小頁面至剛好全屏。
接下來聊一聊流體布局
一個頁面原本
如果我們拽瀏覽器減小窗口寬度，固體布局時會是
這種效果
但流體布局
，看出來有很大的不同了。
元素寬度並不是固定的，而是按照分辨率寬度進行調整，但是整體布局沒有發生改變。
固定寬度布局使用的是像素，但是流體布局寬度使用的是百分比，但由於高度和文字大小神馬還是使用的px所以會造成一旦兩個分辨率差的有點大效果就差強人意。畢竟里面的文字是不會隨着你窗口的減小跟着變小的（不然你讓移動端用戶眼要瞎死嘛）。這也是早期屏幕分辨率相差不大時最愛用的（有人能告知一下那是啥時代嗎？）
插一波彈性布局：包裹文字的元素的尺寸采用em、rem做單位，而頁面的划分區域還是百分數或px做單位。
在此處回顧下em和rem的區別：em是根據自己的font-size×em尺寸得到最終的像素值；rem指的根em，他統一隨着html的font-size而不是元素本身的font-size，搭配媒體查詢或js，動態改變html的font-size即可改變所有（而且咱們計算起來很容易）。
在此提到的媒體查詢可以引出我們今天的重頭：響應式布局
CSS3中的媒體查詢，可以在不同分辨率下對元素重新設置樣式（不只是尺寸），在不同屏幕下可以顯示不同版式。
@media screen and (min-width:480px) 手機
@media screen and (min-width:768px) 平板
@media screen and (min-width:992px) 桌面顯示器
@media screen and (min-width: 1200px){ 選擇器{ 屬性：值; } } 大於1200px時
這四個值是常用的，注意先后順序，小的在前大的在后。