一 ，背景
在移動端頁面開發我們經常會遇到一件尷尬的事 我們所開發出來的頁面跟設計師所給的頁面差別很大 再加上移動設備屏幕的大小不一出來的效果更是參差不齊
然后....
當然 現實情況沒有這么糟糕...但因為前端頁面是是最直接的展示給用戶的 如果跟差異太大 這個頁面其實是失敗的 而設計師也會不斷的找你調視覺，所以我們就要最大限度的實現設計 作為設計師和用戶的橋梁完美的展現頁面...
二，使用百分比
在移動頁面的布局上，我們必須要考慮的是移動設備分辨率多樣性，使用傳統的px來定義一個塊兒級元素是不理想的，因為你要為所有分辨率的手機都做適配是一件極其繁瑣的事，雖然css3的媒體查詢可以實現 ，但我個人認為媒體查詢只適合跨平台的兼容 ，比如手機 ，ipad，pc 這三種設備同時實現一個頁面並達到響應效果的時候，百分比的使用可以解決這個問題，因為他是相對的 相對於設備的寬度來使頁面在不同分辨率的手機上達到完美的響應，接下來我們慢慢聊如何使用百分比
三，百分比＋margin 實現百分百響應
在移動端開發的時候 我們的頁面初始化的時候都會寫上這樣一行代碼
html,body{width:100%; position:relative;}
將html,body元素的寬度設置為100%，目的是將頁面100%撐開達到與設備寬度一致,因為百分比都是相對於父級而言的，將根節點的元素設置為100%，其子元素的寬度都會相對於父級來設置。
接下來我們研究一下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的模擬器觀察頁面效果
模擬iphone6效果，設備的寬度是375px，通過側面的尺度可以看到 我們使用margin-top:20%,header元素距離頂部的高度是75px，我們再改變下頁面的寬度看看
當我們把模擬器的寬度拉到500px時候 ，可以發現header距離頂部的高度變為100px；
所以不難發現 當使用百分比來給margin-top賦值的時候 距離頂部的高度其實 是設備寬度的百分比 （375*20%＝＝75， 500*20%＝＝100）；同理 margin-left,margin-right,margin-bottom都一樣可以這樣使用；
四，實戰應用
當我們拿到設計師的頁面的時候首先要算一把
下面區域距離上面區域的高度是20px 頁面總寬度是750px 所以轉換成頁面的時候 下面的margin-top應該是 (20/750)%; 這樣才會在所有設備上達到完全響應的效果。下面是頁面最終效果 掃碼查看喲.
