页面自适应的几种方法
第一種:頁(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)題。
- 上一篇: xfce中仿gnome的多桌面的xfda
- 下一篇: Spring消息之STOMP