之前做的一個網站，結果今天這幾天測試發現在19寸屏幕和手機屏幕上頁面布局全亂了，今天剛剛改好，發現還是自己經驗不足，做個小總結。
一、div布局要固定寬高
當div不設計長寬高而是自動由內部控件”撐“尺寸的話，我們發現當屏幕縮小時其布局會變亂，（推測原因可能和使用的bootstrap框架的自適應有關），於是我們將所有的寬度設死，這樣當屏幕縮小或改變屏幕尺寸時雖然不會自動適應當前窗口大小，而是出現滾動條，但起碼能保證不會出現之前的布局錯亂的現象。（不過我相信應該能有更優的解決方案）
二、整體頁面寬度設定的小細節
之前看各種網站都發現一個小細節，很多網頁的主體不會占滿整個窗口，在左右兩邊會留下空位，內容寫在中部。
根據這次網站開發的經驗，我感覺到了這么做的好處（肯定不是所有網站都是這個原因）。
舉個例子，假設你將網頁的總體寬度設死，設置成1520px（寫死的原因是上一條），那么你在15寸筆記本上看可能會剛剛好占滿屏幕。但如果你在14寸電腦上看，就會發現超出了屏幕（因為14寸屏幕的寬度小於1520px），此時底部就會出現滾動條，而在19寸屏幕上可能又會占不滿屏幕的現象。
此時我們的解決辦法就是將整體的主體寬度設死為一個比較小的值（比如1170px）並水平居中，而兩邊”自動補白“。這樣就可以保證在各種尺寸的顯示器上不會出現網站內容超過窗口或小於窗口的現象。原因是此時的主體寬度小於任何一個尺寸的屏幕自然就不會超出，而且居中顯示，那么即使沒有占滿屏幕也不會顯得很奇怪。
三、網頁頭部布局的小細節
雖然像第二條說的，在很多網頁上主體都是居中且兩邊補白，但很多網頁的頭部都是寬度占滿屏幕的。這次修改網頁我們也發現了，最終的解決方案其實是頭部主體依然用第二條的解決方案（小尺寸寬度且居中），但兩邊不是補白而是補”背景色“。如現在我所處的這個csdn的寫博客頁面，它的頭部背景顏色就和主體不一樣，是黑灰色。要是讓我設計我會將頭部內容尺寸固定居中，兩邊補灰黑色，制造出一種占滿屏幕寬度的”假象“。