第一種：頁(yè)面中的寬度都用百分比來(lái)做。

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

@media only screen and (max- 500px) {
    body {
        background-color: lightblue;
    }
}

需要注意的是圖片的寬度要設(shè)置成百分比，高度不需要設(shè)置，這樣縮小屏幕時(shí)，圖片自動(dòng)的等比例縮小和放大。

第二種：頁(yè)面所有的尺寸用rem單位來(lái)設(shè)置。

需要給頁(yè)面添加以下代碼：

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>

第一行代碼的作用是禁止讓用戶縮放頁(yè)面。

然后給根元素設(shè)置字體大小為20px。html,body{font-size:20px},后面頁(yè)面中所有的尺寸按照PSD上面量出來(lái)后除以40轉(zhuǎn)換成rem單位的數(shù)值，注意是任何尺寸都要需要去除以40，這比第一種設(shè)置百分比按照父元素的寬度去計(jì)算方便很多。

圖片需要設(shè)置寬和高，PSD量出來(lái)后除以40，少一個(gè)都不行，只設(shè)置一個(gè)圖片會(huì)被拉變形。
做手機(jī)端頁(yè)面時(shí)，清除margin和padding 用*可能清除不掉，需要加上標(biāo)簽名字去清除。
其他的按照正常的去做。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。