响应式布局改变div所占比例

最新推荐文章于 2024-08-03 14:19:16 发布

你的孤独虽败犹荣

最新推荐文章于 2024-08-03 14:19:16 发布

阅读量2k

点赞数

本文链接：https://blog.csdn.net/zhou742626/article/details/78672348

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           #inner{
               width: 1200px;
               margin: 0 auto;
           }
           #left{
               width: 50%;
               height: 400px;
               background: red;
               float: left;
           }
           #right{
               width: 50%;
               height: 400px;
               background: green;
               float: right;
           }
           @media screen and (max-width: 1500px) and (min-width:1200px){
               #inner{
                   width: 1200px;
               }
               #left{
                   width: 50%;
               }
               #right{
                   width: 50%;
               }
           }
           @media screen and (min-width:800px) and (max-width:1200px){
               #inner{
                   width: 100%;
               }
               #left{
                   width: 40%;
                   float: left;
               }
               #right{
                   width: 60%;
                   float: left;
               }
           }
           @media screen and (max-width:800px) {
               #inner{
                   width: 100%;
               }
               #left{
                   width: 20%;
                   float: left;
               }
               #right{
                   width: 80%;
                   float: left;
               }
           }
       </style>
   </head>
   <body>
       <div id="inner">
           <div id="left"></div>
           <div id="right"></div>
       </div>
   </body>
</html>