媒体查询自定义栅格系统

  1.  
    <!DOCTYPE html>
  2.  
    <html>
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <!--设置缩放和绘制-->
  6.  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.  
    <meta name="viewport" content="width=device-width, initial-scale=1">
  8.  
    <title>媒体查询自定义栅格系统</title>
  9.  
    <script src="../ mypethome/lib/html5shiv/html5shiv.js" ></script>
  10.  
    <script src="../ mypethome/lib/respond/respond.min.js" ></script>
  11.  
    <style>
  12.  
    /*
  13.  
    * 设置通用样式
  14.  
    */
  15.  
    *{
  16.  
    margin: 0;
  17.  
    padding: 0;
  18.  
    list-style: none;
  19.  
    }
  20.  
    .container{
  21.  
    height: 40px;
  22.  
    margin: 0 auto;
  23.  
    background-color: gold;
  24.  
    }
  25.  
    /*
  26.  
    * 媒体查询
  27.  
    */
  28.  
    @media screen and (max- 768px) {
  29.  
    /*超小屏幕*/
  30.  
    .container{
  31.  
    100%;
  32.  
    }
  33.  
    }
  34.  
    @media screen and (min- 768px) and (max- 992px){
  35.  
    /*小屏幕*/
  36.  
    .container{
  37.  
    750px;
  38.  
    }
  39.  
    }
  40.  
    @media screen and (min- 992px) and (max- 1200px){
  41.  
    /*大屏幕*/
  42.  
    .container{
  43.  
    970px;
  44.  
    }
  45.  
    }
  46.  
    @media screen and (min- 1200px) {
  47.  
    /*超大屏幕*/
  48.  
    .container{
  49.  
    1170px;
  50.  
    }
  51.  
    }
  52.  
    </style>
  53.  
    </head>
  54.  
    <body>
  55.  
    <div class="container">
  56.  
     
  57.  
    </div>
  58.  
     
  59.  
    </body>
  60.  
    </html>

  61.  

------------恢复内容结束------------

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/onesea/p/14014496.html