響應式網站開發總結

• DIV等比例變化

div{

     width:50%;

     height:0;

padding-bottom:30%；

}

此時padding-bottom的高度是按照屏幕寬度計算的 ，所以會跟寬等比例放縮。

這個技巧非常好用，用來實現下面的圖和背景圖的佈局，可以實現人物跟背景DIV放縮，任何屏幕下完全沒有錯位的情況，並且無需插入斷點。

另外佈局也要注意，減少各個圖層之間的依賴這個佈局。

可以實現完全不錯位是因為沒有別的層對這個人物圖的位置產生影響，它是獨立的脫離文檔流的元素，只設置比例和相對父元素的位置。

減少圖層依賴也許可以使用z-index，簡單佈局應該可以，例如大家都以瀏覽器頂部為基準定位，這樣的可以減少元素之間的依賴。

• vw單位

在屏幕放大縮小的時候字體的調整也是一定要面對的問題，但是又不想加入斷點，希望能平滑過渡，於是發現了vw這個字體大小的單位，基於屏幕大小計算字體大小。

1vw = 屏幕的1%的寬，1vh = 屏幕1%的高，直接使用就可以。

當然目前瀏覽器支持最小字體12px,最小只能這麼小了，這個得注意。

• 佈局更好兼容手機跟電腦

最近接觸到一些網站才發現原來響應式並不是單純同一頁面佈局兼容屏幕，有時移動版跟PC端網站差距大的板塊會在手機端顯示一個DIV佈局，電腦端顯示另一個DIV佈局，只需在css的media里判斷屏幕尺寸（通常767px為界，判定移動端和PC端）插入代碼display：none，display:block。