1、靜態布局（Static Layout）
即傳統Web設計，對於PC設計一個Layout，在屏幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分；
對於移動設備，單獨設計一個布局，使用不同的域名如wap.或m.。
2、自適應布局（Adaptive Layout）
自適應布局（Adaptive）的特點是分別為不同的屏幕分辨率定義布局。布局切換時頁面元素發生改變，但在每個布局中，頁面元素不隨窗口大小的調整發生變化。
你可以把自適應布局看作是靜態布局的一個系列。
3、流式布局（Liquid Layout）
流式布局（Liquid）的特點（也叫"Fluid") 是頁面元素的寬度按照屏幕進行適配調整，主要的問題是如果屏幕尺度跨度太大，那么在相對其原始設計而言過小或過大的屏幕上不能正常顯示
。
4、響應式布局（Responsive Layout）
分別為不同的屏幕分辨率定義布局，同時，在每個布局中，應用流式布局的理念，即頁面元素寬度隨着窗口調整而自動適配。
可以把響應式布局看作是流式布局和自適應布局設計理念的融合。
白話說法：
- 靜態布局：意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫代碼的布局來布置；
- 自適應布局：就是說你看到的頁面，里面元素的位置會變化而大小不會變化；
- 流式布局：你看到的頁面，元素的大小會變化而位置不會變化——這就導致如果屏幕太大或者太小都會導致元素無法正常顯示。
- 自適應布局：每個屏幕分辨率下面會有一個布局樣式，同時位置會變而且大小也會變。
響應式頁面在頭部會加上這一段代碼：
<meta name="applicable-device" content="pc,mobile">
<meta http-equiv="Cache-Control" content="no-transform ">