移动页面缩放方法之(三)rem布局

<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
<title>无标题文档</title>
<style>
*{
    padding:0;
    margin:0;    
}
body{
    background:#000;    
}
div{
    width:6.4rem;
    height:5rem;
    margin:0 auto;
    line-height:5rem;
    font-size:.3rem;
    text-align:center;
    color:#fff;
    background:red;    
}
</style>
</head>

<body>
<div>我是测试的</div>
<script>
;!function(top){
    var doc=top.document;
    top.SetSize=function(width){
        this.obj=doc.querySelector('html');
        this.width=width;
        this.fontSize=100;
        this.init().resize();
    };    
    SetSize.prototype={
        init:function(){
            this.scale=this.obj.clientWidth/this.width;
            this.obj.setAttribute("style","font-size:"+(this.scale*this.fontSize)+"px !important");
            return this;    
        },
        resize:function(){
            top.addEventListener('resize',this.init.bind(this),false);    
        }
    };
    SetSize.prototype.constructor=SetSize;
    doc.addEventListener('DOMContentLoaded',function(){
        new SetSize(640);
    },false);
}(parent);
</script>
</body>
</html>
posted @ 2015-12-13 20:00  璀璨星空168  阅读(162)  评论(0编辑  收藏  举报