移动端开发 rem 案例 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>移动端--rem案例</title>
    <meta name="viewport"   content="width=device-width, initial-scale=1, maximum-scale=1, 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">
    <script src="jquery-1.11.3.min.js"></script>
    <script>
        $(function(){
//仿淘宝  设置html基值
            var scale = 1 / devicePixelRatio;
            document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
            document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
        });
       /*
    
         $(function(){
             var html = document.documentElement;
            var windowWidth = html.clientWidth;
            html.style.fontSize = windowWidth / 6.4 + 'px';
            var $winW=$(window).width(),$winH=$(window).height(),$root=($winW/6.4).toFixed(0)+"px";
            $("html").css("fontSize",$root);
        })*/
    </script>
    <style>
        *{margin:0;padding:0;}
        html,body{
            width:100%;
            height:100%;
        }
        .container{
            padding-top:.47rem;
            width:9.38rem;
            margin:0 auto;
        }
        h1{
            font-size:48px;
            color:#fcbe2a;
            text-align:center;
            margin-bottom:1.16rem;
        }
        h2{
            padding-left:.44rem;
            margin-bottom:1.06rem;
            font-size:28px;
            color:#ee620e;
        }
        ul,li{
            list-style:none;
        }
        ul{
            background:#808080;
        }
        li{
            float:left;
            width:2.84rem;
            height:2.84rem;
            line-height:2.84rem;
            margin-right:.42rem;
            text-align:center;
            font-size:16px;
            background:#00ff00;
        }
        li:last-child{
            float:right;
            margin:0;
        }
        .clearfix{
            zoom:1;
        }
        .clearfix:after{
            content:".";
            display:block;
            visibility:hidden;
            clear:both;
            width:0;
            height:0;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>我是大标题</h1>
    <h2>我是二标题</h2>
    <ul class="clearfix">
        <li>模块1</li>
        <li>模块2</li>
        <li>模块3</li>
    </ul>
</div>
</body>
<script>

</script>
</html>

 

posted @ 2017-01-20 16:18  dongxiaolei  阅读(319)  评论(0)    收藏  举报