一个简单地响应式布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title></title>
    <style type="text/css">
        body,div{
            padding:0;
            margin:0;
        }
        nav{
            width:1000px;
            margin:0 auto;
            height:auto;
        }
        div{
            box-sizing: border-box;
            
            float:left;
            border:1px dashed black;
            padding:4px;
        }
        div>img{
            width:100%;
            height:auto;
        }
        div>span{
            display: block;
            width:100%;
            height:auto;
            text-align: center;
            padding-bottom:2px;
        }
        @media screen and (max-width: 1950px){
            div{
                width:200px;
            }
        }
        @media screen and (max-width: 1050px){
            div{
                width:50%;
            }
        }
        @media screen and (max-width: 600px){
            div{
                width:100%;
            }
        }
    </style>
</head>
<body>
 <nav>
     <div>
      <img src="https://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg">
      <span>
          hello world!
      </span>
    </div>
    <div>
      <img src="https://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg">
      <span>
          hello world!
      </span>
    </div><div>
      <img src="https://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg">
      <span>
          hello world!
      </span>
    </div><div>
      <img src="https://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg">
      <span>
          hello world!
      </span>
    </div><div>
      <img src="https://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg">
      <span>
          hello world!
      </span>
    </div><div>
      <img src="https://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg">
      <span>
          hello world!
      </span>
    </div>
    <div>
      <img src="https://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg">
      <span>
          hello world!
      </span>
    </div>
    <div>
      <img src="https://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg">
      <span>
          hello world!
      </span>
    </div>
    <div>
      <img src="https://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg">
      <span>
          hello world!
      </span>
    </div>
 </nav>
</body>
</html>
手机下
平板电脑下
大屏幕下
一个简单地响应式布局

猜你喜欢
