一、靜態布局
最傳統的web頁面布局設計，常應用於PC端頁面，即網頁上的所有元素都統一使用px作為單位。這種設計頁面的高度和寬度固定，超出瀏覽器的部分使用滾動條查閱。
特點：設計簡單，但對於不同尺寸屏幕的兼容性不好，特別是移動端。
二、流式布局
頁面元素以百分比的形式設置，元素寬高能夠按照屏幕分辨率適應調整，但整體的布局不變。
特點：頁面元素寬高可以自適應調整，但屏幕尺度跨度過大的情況下，頁面不能正常顯示。比如我們以百分比設置了按鈕的寬度，但按鈕上文字的大小是用px來設置的，當屏幕尺寸變大時，按鈕被拉寬而字體大小沒變，這樣就會顯得很不協調。
三、自適應布局
自適應布局主要是應用媒體查詢@media針對不同尺寸和分辨率的設備設置不同的樣式，就相當於創建了多個靜態布局，每一個靜態布局對應一個尺寸范圍的屏幕。但對於同一個設備而言還是靜態布局。
特點：屏幕尺寸或分辨率變化時，頁面元素會跟着變化；但頁面元素不會隨着窗口大小的調整而發生變化。
四、彈性布局
彈性布局又稱為盒子布局或flex布局，用來為盒狀模型提供最大的靈活性，任何一個容器都可以指定為 Flex 布局。 給父容器添加display: flex/inline-flex;屬性，即可使容器內容采用彈性布局顯示，而不遵循常規文檔流的顯示方式；設為flex布局以后，子元素的float、clear和vertical-align屬性將失效!
采用Flex布局的元素，稱為Flex容器（flex container），簡稱”容器”。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱”項目”。
容器最核心的6個屬性：
flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content
項目的6個核心屬性：
order, flex-grow, flex-shrink, flex-basis, flex, align-self
五、響應式布局
響應式布局就是實現不同屏幕分辨率的終端上瀏覽網頁的不同展示方式。響應式網頁設計就是一個網站能夠兼容多個終端-而不是為每個終端做一個特定的版本。
設計步驟:
1、設置meta標簽
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
2、使用媒體查詢和flex設置樣式
body{ background-color: grey; } @media screen and (min-width:1200px){ body{ background-color: pink; } } @media screen and (min-width:700px) and (max-width:1200px){ body{ background-color: blue; } } @media screen and (max-width:700px){ body{ background-color: orange; } }
3、使用rem單位設置font-size
html{ font-size:100px；//1rem=100px }
完成后，就可以定義響應式字體：
@media (min-width:640px){body{font-size:1rem;}} @media (min-width:960px){body{font-size:1.2rem;}}
4、使用max-width設置圖片樣式
應用說明：
1.如果只做pc端，那么靜態布局（定寬度）是最好的選擇；
2.如果做移動端，且設計對高度和元素間距要求不高，那么彈性布局（rem）是最好的選擇；
3.如果pc，移動要兼容，而且要求很高那么響應式布局還是最好的選擇，前提是設計根據不同的高寬做不同的設計，響應式根據媒體查詢做不同的布局。