手机页面rem布局
手机页面设计一般的大小是640，但是，手机屏幕大小确实不确定的，这样，怎么才能做出适应所有手机的手机页面呢？
一般的解决方案有两种，rem布局和百分比布局，更推荐用rem布局来制作手机页面。
首先，给页面的html定义一个100px的
html{
font-size:100px;}/*设定基础rem*/
然后就是这一段js运算了，根据页面的大小来控制基础rem的值；
new function (){
var _self = this;
_self.width =
640;//设置默认最大宽度
_self.fontSize = 100;//默认字体大小
_self.widthProportion =
function(){var p =
(document.body&&document.body.clientWidthdocument.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);
};
<!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基础布局</title> <script type="text/javascript"> new function (){ var _self = this; _self.width = 640;//设置默认最大宽度 _self.fontSize = 100;//默认字体大小 _self.widthProportion = function(){var p = (document.body&&document.body.clientWidthdocument.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;}/*适用于手机端：字体大小用em，1em=16px；为默认字体大小;最大宽度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>区块文案</p> </li> <li> <div class="box"></div> <p>区块文案</p> </li> <li> <div class="box"></div> <p>区块文案</p> </li> <li> <div class="box"></div> <p>区块文案</p> </li> <li> <div class="box"></div> <p>区块文案</p> </li> </ul> </div> </div> </body> </html>
// 监听浏览器,针对不同分辨率计算font-size // 然后根据设计稿比如尺寸是640尺寸 rem = 设计稿的字体大小 / 100 ; 16px —> 0.16rem (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if (clientWidth<=320){ docEl.style.fontSize = '50px'; } // else if(clientWidth>=640){ // docEl.style.fontSize = '100px'; // } else{ docEl.style.fontSize = 100 * (clientWidth / 640) + 'px'; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);
