WEB前端怎么布局？
在談WEB前端怎么布局前，我們先梳理前端的布局類型，具體有以下幾種：
1.靜態布局：不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫代碼時的布局來顯示。常規的pc的網站都是靜態（定寬度）布局的，也就是設置了min-width，這樣的話，如果小于這個寬度就會出現滾動條，如果大于這個寬度則內容居中外加背景，這種設計常見于pc端。
2.流式布局：布局特點是屏幕分辨率變化時，頁面里元素的大小會變化而但布局不變。
3.自適應布局：自適應布局的特點是分別為不同的屏幕分辨率定義布局，即創建多個靜態布局，每個靜態布局對應一個屏幕分辨率范圍。
4.響應式布局：布局特點是每個屏幕分辨率下面會有一個布局樣式，即元素位置和大小都會變。
那么我們如何布局呢？通過以下幾點來選擇布局。
1.如果只做電腦端，*的選擇是靜態布局。
2.如果做移動端，且設計對高度和元素間距要求不高，那么彈性布局（rem+js）是*的選擇，通過一份css+一份js調節font-size就搞定。
3.如果電腦端，移動端要兼容，而且要求很高，那么響應式布局還是*的選擇。前提是設計根據不同的高寬做不同的設計，響應式根據媒體查詢做不同的布局。
如何把web前端網頁做成自適應
1.首先，在網頁代碼的頭部，加入一行viewport元標簽。
viewport是網頁默認的寬度和高度，上面這行代碼的意思是，網頁寬度默認等于屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小占屏幕面積的*。
所有主流瀏覽器都支持這個設置，包括IE9，對于那些老式瀏覽器（主要是IE6、7、8），需要使用css3-.js。
2、不使用絕對寬度由于網頁會根據屏幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。這一條非常重要。具體說，CSS代碼不能指定像素寬度：width:xxx px;
只能指定百分比寬度：width: xx%;或者width:auto;
3、相對大小的字體
字體也不能使用絕對大?。╬x），而只能使用相對大?。╡m）。
body {
font: normal * Helvetica, Arial, sans-serif;
}
上面的代碼指定，字體大小是頁面默認大小的*，即16像素。
h1 {
font-size: 1.5em;
}
然后，h1的大小是默認大小的1.5倍，即24像素（24/16=1.5）。
small {
font-size: 0.875em;
}
small元素的大小是默認大小的0.875倍，即14像素（14/16=0.875）。
web前端自適應問題！
正確的做法是把頁面分開，即判斷瀏覽器，如果是手機，導向的是手機專用頁面，否則導向pc專用頁面，即使是手機，也有不同的分辨率，也需要判斷并調整頁面，如可用document.body.獲取屏幕寬度
《web前端筆記30》css三欄布局、左右兩欄寬度固定，中間自適應
三欄布局一般指的是頁面中一共有三欄， 左右兩欄寬度固定，中間自適應的布局 ，三欄布局的具體實現：
利用浮動和負邊距來實現。父級元素設置左右的 padding，三列均設置向左浮動，中間一列放在最前面，寬度設置為父級元素的寬度，因此后面兩列都被擠到了下一行，通過設置 margin 負值將其移動到上一行，再利用相對定位，定位到兩邊。
