div{
width:50%;
height:0;
padding-bottom:30%；
此時padding-bottom的高度是按照螢幕寬度計算的 ，所以會跟寬等比例放縮。
這個技巧非常好用，用來實現下面的圖和背景圖的布局，可以實現人物跟背景div放縮，任何螢幕下完全沒有錯位的情況，並且無需插入斷點。
另外布局也要注意，減少各個圖層之間的依賴這個布局。
可以實現完全不錯位是因為沒有別的層對這個人物圖的位置產生影響，它是獨立的脫離文件流的元素，只設定比例和相對父元素的位置。
減少圖層依賴也許可以使用z-index，簡單布局應該可以，例如大家都以瀏覽器頂部為基準定位，這樣的可以減少元素之間的依賴。
在螢幕放大縮小的時候字型的調整也是一定要面對的問題，但是又不想加入斷點，希望能平滑過渡，於是發現了vw這個字型大小的單位，基於螢幕大小計算字型大小。
1vw = 螢幕的1%的寬，1vh = 螢幕1%的高，直接使用就可以。
當然目前瀏覽器支援最小字型12px,最小只能這麼小了，這個得注意。
最近接觸到一些網站才發現原來響應式並不是單純同一頁面布局相容螢幕，有時移動版跟pc端網站差距大的板塊會在手機端顯示乙個div布局，電腦端顯示另乙個div布局，只需在css的media裡判斷螢幕尺寸（通常767px為界，判定移動端和pc端）插入程式碼display：none，display:block。
響應式開發
現在的自由響應式的html5模板的有著高度的市場需求，因為他們完全改變了 設計與開發工業來說，是比較容易的，順手，高階語言，可以很容易地建立了很多令人驚訝的事情，很快。這些模板是易於定製，有很多不同的特點。響應式html5模板不僅是高質量的而且看起來偉大在每個裝置的顯示器，在這個時代的玩意兒片是至關...
響應式開發
1.什麼是響應式開發 顧名思義，同乙個 相容不同的大小的裝置。如pc端 移動端 平板 橫屏 豎排 的顯示風格。描述響應式介面最著名的一句話就是 content is like water 翻譯成中文便是 如果將螢幕看作容器，那麼內容就像水一樣 2.為什麼要設計響應式開發 因為市面上出現了越來越多的智...
響應式總結
一 響應式頁面 1 響應式 的兩種形式 2 響應式 的兩種技術 二 螢幕大小分類 1 超小螢幕 手機，小於768px 2 小螢幕 平板，大於等於768px media max width 992px 3 中等螢幕 桌面顯示器，大於等於992px media min width 992px 4 大螢幕...