媒体查询具体使用

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      .container {
        width: 1000px;
        height: 1000px;
        background-color: pink;
        margin: 0 auto;
      }

      /* 使用媒体查询，能针对不同屏幕区间设置不同的布局和样式 */
      /* 怎么使用媒体查询 */
      /* @media  */
      /* 语法 @media screen and (max-width:768px) and (min-width:320px){样式属性} */
      @media screen and (max-width:768px) {

        /* 在超小屏的时候 小于768px，当前的容器的宽度100% 背景设置成蓝色 */
        .container {
          width: 100%;
          height: 1000px;
          background: blue;
          margin: 0 auto;
        }
      }
      @media screen and (min-width:768px) and (max-width:992px) {
      
        /* 在小屏设备的时候 768到992px，当前容器的宽度750px 背景设置为绿色 */
        .container {
          width: 750px;
          height: 1000px;
          background: lawngreen;
          margin: 0 auto;
        }
      }
      @media screen and (min-width:992px) and (max-width:1200px) {
      
        /* 在中屏设备的时候 992到1200px，当前容器的宽度为 970px 背景设置为黄色 */
        .container {
          width: 970px;
          height: 1000px;
          background: yellow;
          margin: 0 auto;
        }
      }
      @media screen and (min-width:1200px){
      
        /* 在中屏设备的时候 992到1200px，当前容器的宽度为 970px 背景设置为黄色 */
        .container {
          width: 1170px;
          height: 1000px;
          background: red;
          margin: 0 auto;
        }
      }
    </style>
  </head>
  <body>

    <!--    
    响应式容器
      在超小屏的时候 小于768px，当前的容器的宽度100%  背景设置成蓝色 
      在小屏设备的时候 768到992px，当前容器的宽度750px 背景设置为绿色
      在中屏设备的时候 992到1200px，当前容器的宽度为 970px 背景设置为黄色
      在大屏设备的时候，1200px以上， 当前容器的宽度为 1170px 背景颜色设置为红色
      
-->
    <div class="container">

    </div>
  </body>
</html>
媒体查询具体使用

猜你喜欢
