媒体查询自定义栅格系统

Posted onesea

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了媒体查询自定义栅格系统相关的知识,希望对你有一定的参考价值。

 

  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.  

以上是关于媒体查询自定义栅格系统的主要内容,如果未能解决你的问题,请参考以下文章

深入理解bootstrap的栅格系统

媒体查询

Bootstrap navbar 在自定义宽度上折叠媒体查询

scss 自定义Sass mixin用于使用媒体查询

使用 HTML 中的自定义 CSS 覆盖 CSS 文件中的媒体查询

Bootstrap栅格化系统设计原理