H5移動(dòng)前端完美布局之－margin百分比的使用
在移動(dòng)端頁(yè)面開(kāi)發(fā)我們經(jīng)常會(huì)遇到一件尷尬的事 我們所開(kāi)發(fā)出來(lái)的頁(yè)面跟設(shè)計(jì)師所給的頁(yè)面差別很大 再加上移動(dòng)設(shè)備屏幕的大小不一出來(lái)的效果更是參差不齊
當(dāng)然 現(xiàn)實(shí)情況沒(méi)有這么糟糕...但因?yàn)榍岸隧?yè)面是是最直接的展示給用戶的 如果跟差異太大 這個(gè)頁(yè)面其實(shí)是失敗的 而設(shè)計(jì)師也會(huì)不斷的找你調(diào)視覺(jué)，所以我們就要***限度的實(shí)現(xiàn)設(shè)計(jì) 作為設(shè)計(jì)師和用戶的橋梁***的展現(xiàn)頁(yè)面...
二，使用百分比
在移動(dòng)頁(yè)面的布局上，我們必須要考慮的是移動(dòng)設(shè)備分辨率多樣性，使用傳統(tǒng)的px來(lái)定義一個(gè)塊兒級(jí)元素是不理想的，因?yàn)槟阋獮樗蟹直媛实氖謾C(jī)都做適配是一件極其繁瑣的事，雖然css3的媒體查詢可以實(shí)現(xiàn) ，但我個(gè)人認(rèn)為媒體查詢只適合跨平臺(tái)的兼容 ，比如手機(jī) ，ipad，pc 這三種設(shè)備同時(shí)實(shí)現(xiàn)一個(gè)頁(yè)面并達(dá)到響應(yīng)效果的時(shí)候，百分比的使用可以解決這個(gè)問(wèn)題，因?yàn)樗窍鄬?duì)的 相對(duì)于設(shè)備的寬度來(lái)使頁(yè)面在不同分辨率的手機(jī)上達(dá)到***的響應(yīng)，接下來(lái)我們慢慢聊如何使用百分比
三，百分比＋margin 實(shí)現(xiàn)***響應(yīng)
在移動(dòng)端開(kāi)發(fā)的時(shí)候 我們的頁(yè)面初始化的時(shí)候都會(huì)寫(xiě)上這樣一行代碼
html,body{width:100%; position:relative;}
將html,body元素的寬度設(shè)置為100%，目的是將頁(yè)面100%撐開(kāi)達(dá)到與設(shè)備寬度一致,因?yàn)榘俜直榷际窍鄬?duì)于父級(jí)而言的，將根節(jié)點(diǎn)的元素設(shè)置為100%，其子元素的寬度都會(huì)相對(duì)于父級(jí)來(lái)設(shè)置。
接下來(lái)我們研究一下margin和百分比的配合使用
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
- <meta name="apple-touch-fullscreen" content="YES" />
- <meta name="apple-mobile-web-app-status-bar-style" content="black" />
- <link rel="stylesheet" type="text/css" href="../css/reset.css">
- <style type="text/css">
- html,body{ width: 100%; position:relative;}
- .all{ width: 100%;}
- .header{ width: 100%; background: #ff6666; height: 40px; margin-top: 20%;}
- </style>
- </head>
- <body>
- <div class="all">
- <header class="header"></header>
- </div>
- </body>
- </html>
我們使用chrome的模擬器觀察頁(yè)面效果
模擬iphone6效果，設(shè)備的寬度是375px，通過(guò)側(cè)面的尺度可以看到 我們使用margin-top:20%,header元素距離頂部的高度是75px，我們?cè)俑淖兿马?yè)面的寬度看看
當(dāng)我們把模擬器的寬度拉到500px時(shí)候 ，可以發(fā)現(xiàn)header距離頂部的高度變?yōu)?00px；
所以不難發(fā)現(xiàn) 當(dāng)使用百分比來(lái)給margin-top賦值的時(shí)候 距離頂部的高度其實(shí) 是設(shè)備寬度的百分比 （375*20%＝＝75， 500*20%＝＝100）；同理 margin-left,margin-right,margin-bottom都一樣可以這樣使用；
四，實(shí)戰(zhàn)應(yīng)用
當(dāng)我們拿到設(shè)計(jì)師的頁(yè)面的時(shí)候首先要算一把
下面區(qū)域距離上面區(qū)域的高度是20px 頁(yè)面總寬度是750px 所以轉(zhuǎn)換成頁(yè)面的時(shí)候 下面的margin-top應(yīng)該是 (20/750)%; 這樣才會(huì)在所有設(shè)備上達(dá)到完全響應(yīng)的效果。
