>http://www.ghugo.com/mobile-h5-fluid-layout-for-iphone6/ http://www.25xt.com/webapp/5802.html 2、`<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> `這句話必須有！ 3、該元素的margin，padding的px值除以該元素的父元素寬度px值，得出自適應元素適應的百分比！ 4、高度的百分比無效！，所以，換個角度，去設計它的padding或者margin的百分比就可以了！ 5、使用`@media only screen and (min-width : 320px) and (max-width: 360px){}`，這種方式進行某些調整！ 6、文字的text-indent和他的當前字體大小有關，單位為em或者rem為好！ 7、合理設計網頁結構，外層應該完全適應包含里面的內容為好 **注意**：如下圖：這時紅色文字的margin-top負值！上移到黑色圖片時，會出現兩者總高度小與503px的情況！）  8、父元素設置了position：absolute或者relative，都不會阻止其內部的圖片或者文字的自縮放！ 9、[談響應式web設計代碼實現](http://isux.tencent.com/code-of-response-web-design.html) 12、CSS Sprite背景圖自適應  全部使用百分比，而且background-size屬性一定要設置(且要放在background屬性后面，否則沒有效果)！ 對于背景圖像background-size的理解： ~~~ <div class="m-tt">國際領先婦科技術 源自專業</div> <style> .m-tt { background-position-y: 20%; background-size: 13% 50%; (Xee:13%是相對包含元素的width的百分比，50%是height的百分比！) } </style> ~~~ ***** 13、暫時的理解：除了字體和高度使用rem之外，全部使用百分比（width，margin，padding） 11、使用百分數的時候，子欄目的所有屬性(width、height、margin、padding等)都是根據父級欄目的寬屬性（由書寫方向改變）來設置的，如果是使用em的時候，子欄目都是根據他的父級欄目的字體大小設置的。 10、 **一個元素的 padding或者margin，如果值是一個百分比，那這個百分比是相對于其父元素的寬度而言的**，即使對于 padding-bottom（margin-bottom）和 padding-top（margin-top） 也是如此。 另外，在計算 Overflow 時，是將元素的內容區域（即 width / height 對應的區域）和 Padding 區域一起計算的。換句話說，即使將元素的 overflow 設置為 hidden，“溢出”到 Padding 區域的內容也會照常顯示。 **所以：綜上兩條所述，我們可以使用 padding-bottom 來代替 height 來實現高度與寬度成比例的效果。** >**xee**：怎么來理解？看下圖  *padding前*  *padding后* 可以看到“溢出”到 Padding 區域的內容也會顯示！（padding的部分為淺綠色）