Html5移动开发(2)rem使用和基本布局

不同分辨率下效果图

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <title></title>
    <style>
        /*考虑到练习,写在一起比较好移动,真正做项目时还是要有样式表*/
        * {
            padding: 0rem;
            margin: 0rem;
        }

        html {
            /*谷歌浏览器写62.5%会有一点兼容问题..为了谷歌.改一下倍率吧.*/
            font-size: 625%;
            font-family: "微软雅黑";
        }

        body {
            /*其实就当16px这么用了.因为设置了625%直接减去两位就可以按px方法做了*/
            font-size: .16rem;
        }

        div {
            /*box-sizing:border-box;设置了边框也没有把DIV变大,太棒了~*/
            box-sizing: border-box;
        }

        img {
            display: block;
            max-width: 100%;
        }

        #img1 {
            margin: 0 auto;
            width: 6.4rem;
        }

        .divleft {
            border: solid 0.01rem #808080;
            width: 50%;
            background-color: aliceblue;
            float: left;
        }

        .divright {
            width: 50%;
            border: solid 0.01rem #000000;
            background-color: antiquewhite;
            float: left;
        }

        .container {
            max-width: 6.4rem;
            margin: 0 auto;
        }

        footer {
            margin-top: 0.1rem;
            width: 100%;
            background-color: #eee;
        }

        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <span>在于有关的和我人灯光,类似因,.要 灰色 要. 为了村在人仍,困难在吧伙伴2.. 中要要求要.</span>
        </header>
        <article>
            <div class="divleft"><img id="img1" src="img/4.jpg" /></div>
            <div class="divright"><img id="img1" src="img/2.jpg" /></div>
            <div class="clear"></div>
        </article>

        <footer>
            关于
        </footer>
    </div>
</body>
</html>


 

posted on 2017-02-06 15:16  cxd1008  阅读(265)  评论(0)  编辑  收藏  举报