所謂的響應式布局，就是設計一個網站的時候，讓它滿足能同時適應不同的端口，而不用對不同端口設計不同的網頁。
實現方式：采用百分比自適應布局
1.原生代碼實現。
在國內目前設計網頁的時候，一般會分成PC端和移動端兩套頁面，但在一定的情況下，必須滿足只設計一個頁面的情況下，滿足不同端口都能正常使用，
因此會用用到自適應的方法。
用原生代碼實現的根本在於媒體查詢@media的設置。
@media screen 可以查詢當前瀏覽器的尺寸，因此可采用該方法對同一個頁面設置不同的CSS樣式，來滿足不同分辨率要求。
舉例如下：
@media screen and (min-width:1000px){...} 對應PC端頁面
@media screen and (max-width:1000px) and (min-width:768px) {...} 對應平板端頁面
@media screen and (max-width:768px){...} 對應手機端頁面
2.采用bootstrap框架布局
bootstrap框架布局完成的頁面，是自動對應的自適應效果。
但是在書寫的時候，應該嚴格按照bootstrap的書寫規范，才不會出現怪異性問題。
寫法舉例：
<div class="col-md-6 col-sm-6 col-xs-12">
說明：最后的數字對應該div所占柵欄的列數。
col-md-6 代表在PC端上顯示在一行的6個柵欄，也就是一半。
col-sm-6 代表在平板上也顯示div占當前行的一半。
col-xs-12 代表在手機端顯示為當前行的百分之百填充。
3.還有其他方式，如JQuery和專門做響應式的JS文件，均能實現自適應效果，實現響應式布局。