响应式网页编写学习一

样式

注意media 中width 属性设置，那是为了页面大小连贯，不出现滚动条。最后一个设置居中，其他都是100%。

1 2	`padding:` `10px;` `box-sizing: border-box;`

　　加上面两个样式是为了显示内容好看。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    </meta>
    <title>
        响应页面制作
    </title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 800px;
            height: 200px;
            background: red;
            margin: 0 auto;
        }

        @media (max-width:500px) {
            .box {
                background: yellow;
                /*内容没有随大小变化*/
                width: 100%;

padding: 10px;

box-sizing: border-box;

            }
        }

        @media (min-width:500px) {
            .box {
                background: green;
                width: 100%;

padding: 10px;

box-sizing: border-box;



            }
        }

        @media (min-width:800px) {
            .box {
                background: red;
                width: 100%;

padding: 10px;

box-sizing: border-box;



               
            }
        }

        @media (min-width:1100px) {
            .box {
                background: blue;
                width: 1100px;
                margin: 0 auto;/*此时才设置居中*/

padding: 10px;

box-sizing: border-box;



            }
        }
    </style>
</head>

<body>
    <div class="box">

        2、给予机会和空间，但不是无限制的。
        我们不是小学老师，不对成年人的心智启迪负责。
        
        3、不要做无谓的努力
        比如被某种传销骗局洗脑，比如相信某种伪科学，其实这种情况很常见。
        有些人会很努力的试图说服对方，试图解救对方。
        基本上，成功的几率是非常低的。
        2、给予机会和空间，但不是无限制的。
        我们不是小学老师，不对成年人的心智启迪负责。
        
        3、不要做无谓的努力
        比如被某种传销骗局洗脑，比如相信某种伪科学，其实这种情况很常见。
        有些人会很努力的试图说服对方，试图解救对方。
        基本上，成功的几率是非常低的。
        2、给予机会和空间，但不是无限制的。
        我们不是小学老师，不对成年人的心智启迪负责。
        
        3、不要做无谓的努力
        比如被某种传销骗局洗脑，比如相信某种伪科学，其实这种情况很常见。
        有些人会很努力的试图说服对方，试图解救对方。
        基本上，成功的几率是非常低的。
        2、给予机会和空间，但不是无限制的。
        我们不是小学老师，不对成年人的心智启迪负责。
        
       
    
    </div>
</body>

</html>