码迷,mamicode.com
首页 > 其他好文 > 详细

媒体查询自定义栅格系统

时间:2020-11-20 11:58:48      阅读:9      评论:0      收藏:0      [点我收藏+]

标签:span   sel   pat   bsp   htm   媒体查询   meta   type   屏幕   

 

  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-width: 768px) {
  29.  
    /*超小屏幕*/
  30.  
    .container{
  31.  
    width: 100%;
  32.  
    }
  33.  
    }
  34.  
    @media screen and (min-width: 768px) and (max-width: 992px){
  35.  
    /*小屏幕*/
  36.  
    .container{
  37.  
    width: 750px;
  38.  
    }
  39.  
    }
  40.  
    @media screen and (min-width: 992px) and (max-width: 1200px){
  41.  
    /*大屏幕*/
  42.  
    .container{
  43.  
    width: 970px;
  44.  
    }
  45.  
    }
  46.  
    @media screen and (min-width: 1200px) {
  47.  
    /*超大屏幕*/
  48.  
    .container{
  49.  
    width: 1170px;
  50.  
    }
  51.  
    }
  52.  
    </style>
  53.  
    </head>
  54.  
    <body>
  55.  
    <div class="container">
  56.  
     
  57.  
    </div>
  58.  
     
  59.  
    </body>
  60.  
    </html>
  61.  

媒体查询自定义栅格系统

标签:span   sel   pat   bsp   htm   媒体查询   meta   type   屏幕   

原文地址:https://www.cnblogs.com/onesea/p/13982981.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!