兩個專案都需要響應式的布局，比較偷懶的做法是使用一些柵格布局的框架如bootstrap；雖然它能做到一定程度的響應式，但侷限性也相當大，
細節微調很困難加上本身會有一些奇奇怪怪的預設設定導致css很難做定製化的修改。
故決定放棄框架自己寫布局。
兩個專案下來各種方案都嘗試過，比較靠譜的響應式寫法有以下兩種：
1、將height設為0，通過padding-bottom來控制元素高度。
2、使用vw，vh等css3新加入的單位來實現響應式高度。
以上兩種方式各有利弊，就目前碰到的狀況來說最大影響的就是overflow這個屬性。
具體來說，當使用方案1的時候給指定div設定overflow-y：auto屬性時，會出現內部並未超過包裹div高度也會出現可拖動的滾動條，見下圖：
究其原因，在於我們設定了height為0，overflow就以這個為基準線判斷是否超過了最大高度，
於是不管內容多少都會出現滾動條，影響使用者體驗。
這個時候就可以考慮使用vw，vh這兩個css3新新增的單位，其原理是以視窗寬高百分比來進行設定，就可以避免這個bug：
相比較而言，vw新單位在這個方面更勝一籌。
但正如blue所說：「好用的東西一定有相容性問題」。
ie上想支援vw，vh至少需要9，其他主流瀏覽器則沒有太大問題。
總結：vw，vh能獲得最好的響應式布局體驗，但想要更好的相容性則應該考慮height為0，padding-bottom撐開高度的寫法。
高度隨寬度適應的響應式方案
高度隨寬度自適應有很多種方案，這裡只討論一種巧妙的方案，就是利用margin padding。我把 記錄下來供以後開發時參考，相信對其他人也有用。margin padding有這麼乙個很巧妙的知識點 當margin padding取形式為百分比的值時，無論是left right，還是top bott...
響應式的優點與缺點？
響應式 是在2010年提出來的，是為了能讓網頁在不同裝置下相容多個終端，而不是為每個終端特定一種版本。1.在不同裝置下能有不同的頁面排版，這也是響應式最大的優點，在解析度不同，裝置環境進行一些不同的設計，所有開發維護和運營上，相對多個版本成本會降低很多。2.相容性好，能在不同的裝置下瀏覽。3.方便後...
響應式布局與Bootstrap
bootstrap的介紹 什麼是響應式布局 讓乙個 相容不同解析度的裝置 給使用者更好的視覺使用體驗。響應式布局的優缺點優點 解決了裝置之間的差異化展示 讓不同的裝置達到最優的體驗 缺點 對開發者來說，相容性 多，工作量大，對瀏覽器來說，載入速度受影響 響應式布局設計原則移動優先 在設計的初期就要考...