【经验心得】 弹性布局rem-----模板----640设计稿

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<style>
    *{margin:0;padding:0;}
    html{font-size:625%;}
    body{max-width:640px;margin:0 auto;font-size:14px;}
</style>
</head>


<body>
<div>...</div>
<div>...</div>

<script>
new function (){
    var _self =  this ;
    _self.width = 640; // 设置默认最大宽度
    _self.fontSize = 100; // 默认字体大小
    _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>
</body>
</html>

posted on 2015-02-10 10:01  鬼鬼丫404  阅读(143)  评论(0)    收藏  举报

导航