↗☻【响应式Web设计 HTML5和CSS3实战 #BOOK#】第3章 拥抱流式布局

目标元素宽度 ÷ 上下文元素宽度 = 百分比宽度

如果我们给body标签设置文字大小为100%,给其他文字都使用相对单位em,那这些文字都会受body上得初始声明的影响。这样做的好处就是,如果在完成了所有文字排版后,客户提出将页面文字统一放大一点,我们就可以只修改body的文字大小,其他所有文字也会相应变大

现代浏览器的默认文字大小都是16像素。因此一开始给body标签应用下列任何一条规则所产生的效果都一样:
font-size:100%;
font-size:16px;
font-size:1em;

<!DOCTYPE HTML>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        ul {

            list-style: none;

        }

        #wrapper {

            width: 96%;

            margin-right: auto;

            margin-left: auto;

            background-color: #DDD;

        }

        #header {

            width: 97.9166667%;

            padding-right: 1.0416667%;

            padding-left: 1.0416667%;

            background-color: #FF0;

        }

        #header li {

            display: inline-block;

            margin-right: 2.6595745%;

            font-size: 2em;

        }

        #logo img {

            width: 33%;

            max-width: 300px;

        }

    </style>

</head>

<body>

    <div id="wrapper">

        <div id="header">

            <div id="logo">

                <img src="http://pic002.cnblogs.com/images/2012/382256/2012080118323766.gif" alt="" />

            </div>

            <div id="navigation">

                <ul>

                    <li><a href="">WHY?</a></li><li><a href="">SYNOPSIS</a></li><li><a href="">STILLS/PHOTOS</a></li><li><a href="">VIDEOS/CLIPS</a></li><li><a href="">QUOTES</a></li><li><a href="">QUIZ</a></li>

                </ul>

            </div>

        </div>

        <div id="sidebar"></div>

        <div class="content"></div>

        <div class="footer"></div>

    </div>

</body>

</html>

 

你可能感兴趣的:(html5)