手機(jī)頁(yè)面設(shè)計(jì)一般的大小是640，但是，手機(jī)屏幕大小確實(shí)不確定的，這樣，怎么才能做出適應(yīng)所有手機(jī)的手機(jī)頁(yè)面呢？
一般的解決方案有兩種，rem布局和百分比布局。這兩種方案我有都試過(guò)，所以現(xiàn)在更推薦用rem布局來(lái)制作手機(jī)頁(yè)面;
rem布局的兼容性：
Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+、ie6-ie8 還是別用rem
不過(guò)現(xiàn)在的手機(jī)一般瀏覽器，一般可以直接不用去管IE內(nèi)核的瀏覽器了。
REM的計(jì)算公式
例:html 設(shè)置font-size:16px 1rem = 16px
那么640px = 640/16 =40rem
個(gè)人建議設(shè)置為100px 方便計(jì)算
首先，給頁(yè)面的html定義一個(gè)100px的
html{ font-size:100px;}/*設(shè)定基礎(chǔ)rem*/
然后，最核心的代碼就是這一段js運(yùn)算了，根據(jù)頁(yè)面的大小來(lái)控制基礎(chǔ)rem的值；
new function (){
var _self = this;
_self.width = 640;//設(shè)置默認(rèn)最大寬度
_self.fontSize = 100;//默認(rèn)字體大小
_self.widthProportion = function(){var p = (document.body&&document.body.clientWidth||document.getElementsByTagName("html")[0].offsetWidth)/_self.width;return p>1?1:p<0.5?0.5:p;};
_self.changePage = function(){
document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+_self.widthProportion()*_self.fontSize+"px !important");
}
_self.changePage();
window.addEventListener('resize',function(){_self.changePage();},false);
};
demo
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta charset="utf-8">
<title>rem基礎(chǔ)布局</title>
<script type="text/javascript">
new function (){
var _self = this;
_self.width = 640;//設(shè)置默認(rèn)最大寬度
_self.fontSize = 100;//默認(rèn)字體大小
_self.widthProportion = function(){var p = (document.body&&document.body.clientWidth||document.getElementsByTagName("html")[0].offsetWidth)/_self.width;return p>1?1:p<0.5?0.5:p;};
_self.changePage = function(){
document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+_self.widthProportion()*_self.fontSize+"px !important");
}
_self.changePage();
window.addEventListener('resize',function(){_self.changePage();},false);
};
</script>
<style type="text/css">
/*=== base style===*/
*{margin: 0px; padding: 0px;}
ul{list-style: none;}
.wrap{min-width: 320px; max-width: 640px; width: 100%; margin: 0px auto;; background: #2a6ace; font-family:'微軟雅黑', 'helvetica neue',tahoma,'hiragino sans gb',stheiti,'wenquanyi micro hei',\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,sans-serif; font-size: 12px;}/*適用于手機(jī)端：字體大小用em，1em=16px；為默認(rèn)字體大小;最大寬度640*/
.pro{width:6.2rem; margin: 0px auto; padding-top: 20px; overflow: hidden;}
.clearfix:after {content:"";height:0;display:block;clear:both;}
.clearfix {zoom:1;}
.pro ul{width:6.4rem;}
.pro li{width: 3rem; height: 3.6rem; float: left; margin: 0 0.2rem 0.2rem 0;}
.pro li .box{width: 3rem; height: 3rem; background: #ccc;}
.pro li p{font-size: 0.24rem; line-height: 0.6rem; text-align: center;}
</style>
</head>
<body>
<div class="wrap">
<div class="pro">
<ul class="clearfix">
<li> <div class="box"></div> <p>區(qū)塊文案</p> </li>
<li> <div class="box"></div> <p>區(qū)塊文案</p> </li>
<li> <div class="box"></div> <p>區(qū)塊文案</p> </li>
<li> <div class="box"></div> <p>區(qū)塊文案</p> </li>
<li> <div class="box"></div> <p>區(qū)塊文案</p> </li>
</ul>
</div>
</div>
</body>
</html>
