关于网页前端中的 media响应式布局

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <link rel="shortcut icon" href="img/mynote.ico"/>
       <link rel="stylesheet" type="text/css" href="css/reset.css" />
       <title>media响应式布局</title>
       <style type="text/css">
           #div1 {
               width: 100%;
               height: 44px;
               background: black;
           }

           #div2 {
               width: 1000px;
               height: 44px;
               text-align: center;
               line-height: 44px;
               color: white;
               display: flex;
               margin: 0px auto;
               justify-content: space-around;
           }

           #div2>span {
               width: 60px;
               height: 44px;
               font-size: 14px;
               font-weight: 400;
               display: inline-block;
               text-align: center;
           }

           #div2>#span3 {
               display: none;
           }

           #div2>span>img {
               vertical-align: middle;
           }
           /*通过@media screen可以实现响应式布局
将浏览器窗口尺寸分段
每段通过@media screen修改样式
这样就能实现网页跟随浏览器窗口尺寸改变自身布局*/

           @media screen and (min-width:720px) and (max-width:960px) {
               #div2 {
                   width: 100%;
               }
           }

           @media screen and (max-width:720px) {
               #div2 {
                   width: 100%;
                   display: flex;
                   justify-content: space-between;
               }
               #div2>span {
                   display: none;
               }
               #div2>#span1 {
                   display: inline-block;
               }
               #div2>#span3 {
                   display: inline-block;
                   margin-left: 15px;
               }
               #div2>#span2 {
                   display: inline-block;
                   margin-right: 15px;
               }
           }
       </style>
   </head>

   <body>
       <div id="div1">
           <div id="div2">
               <span id="span3"><img src="img/QQ图片20180713105401.png"/></span>
               <span id="span1"><img src="img/QQ图片20180713104805.png"/></span>
               <span>Mac</span>
               <span>iPad</span>
               <span>iPhone</span>
               <span>Watch</span>
               <span>Music</span>
               <span>技术支持</span>
               <span><img src="img/QQ图片20180713104826.png"/></span>
               <span id="span2"><img src="img/QQ图片20180713104837.png"/></span>
           </div>
       </div>
   </body>

</html>

关于网页前端中的 media响应式布局

猜你喜欢