第一種：頁面中的寬度都用百分比來做。
- 頁面中盒子的高度不能設固定高度。開始學DIV+CSS布局的時候我給每個盒子都設置了固定的寬和高，這樣頁面做起來非常快，只需要先把頁面整體的布局結構搞定，再往里面丟內容就行了，但是后來發現這樣的結構是錯誤的，調整瀏覽器的寬度里面的內容可能會沖破盒子。正確的思路是高度由內容去撐起來，不管你如何去縮小，內容都不會跑出盒子。
- 百分比是按照父元素的寬度來計算的，包括margin 和padding的值，也是除以父元素的寬度，水平方向的單位都需要設置成百分比。
- 然后字體的大小最好使用rem單位來設置，需要給根元素設置一個字體大小，比如html.body{font-size:10px}，則1rem的大小為10px，方便在不同的屏幕尺寸來調整頁面整體文本的大小。
- 使用媒體查詢來根據不同的屏幕尺寸來應用不同的樣式
@media only screen and (max-width: 500px) { body { background-color: lightblue; } }
需要注意的是圖片的寬度要設置成百分比，高度不需要設置，這樣縮小屏幕時，圖片自動的等比例縮小和放大。
第二種：頁面所有的尺寸用rem單位來設置。
需要給頁面添加以下代碼：
1 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 2 <meta name="format-dection" content="telephone=no"/> 3 <script type="text/javascript"> 4 !function(a){function b(){var b=a.document,c=b.documentElement,d=c.getBoundingClientRect().width;document.documentElement.style.fontSize=20*(d/360)+"px"}window.addEventListener("DOMContentLoaded",function(){b()},!1),window.addEventListener("resize",function(){b()}),b()}(window); 5 </script>
第一行代碼的作用是禁止讓用戶縮放頁面。
然后給根元素設置字體大小為20px。html,body{font-size:20px},后面頁面中所有的尺寸按照PSD上面量出來后除以40轉換成rem單位的數值，注意是任何尺寸都要需要去除以40，這比第一種設置百分比按照父元素的寬度去計算方便很多。
- 圖片需要設置寬和高，PSD量出來后除以40，少一個都不行，只設置一個圖片會被拉變形。
- 做手機端頁面時，清除margin和padding 用*可能清除不掉，需要加上標簽名字去清除。
- 其他的按照正常的去做。