第一種：頁面中的寬度都用百分比來做。

頁面中盒子的高度不能設固定高度。開始學DIV+CSS布局的時候我給每個盒子都設置了固定的寬和高，這樣頁面做起來非常快，只需要先把頁面整體的布局結構搞定，再往里面丟內容就行了，但是后來發現這樣的結構是錯誤的，調整瀏覽器的寬度里面的內容可能會沖破盒子。正確的思路是高度由內容去撐起來，不管你如何去縮小，內容都不會跑出盒子。
百分比是按照父元素的寬度來計算的，包括margin 和padding的值，也是除以父元素的寬度，水平方向的單位都需要設置成百分比。
然后字體的大小最好使用rem單位來設置，需要給根元素設置一個字體大小，比如html.body{font-size:10px}，則1rem的大小為10px，方便在不同的屏幕尺寸來調整頁面整體文本的大小。
使用媒體查詢來根據不同的屏幕尺寸來應用不同的樣式

@media only screen and (max- 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 用*可能清除不掉，需要加上標簽名字去清除。
其他的按照正常的去做。

總結

以上是生活随笔為你收集整理的页面自适应的几种方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。