响应式媒体查询

前言：响应式布局有很多种布局方式，如百分比，rem，vh，vw，flex，媒体查询，这里我们就说媒体查询

说白了就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的

列举几个比较主流或常见的

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        height: 300px;
        background-color: red;
        margin: 0 auto;
      }
      @media screen and (max-width: 767px) {
        /* 小屏幕下  --- 泛指手机 */
        .box {
          width: 100%;
        }
      }
      @media screen and (min-width: 768px) {
        /* 中屏幕下 --- 泛指iPad 平板   768<=X<992 */
        .box {
          width: 750px;
        }
      }
      @media screen and (min-width: 993px) {
        /* 中上 --- 我定义为pc小屏幕和平板较大的 993<=X<1200 */
        .box {
          width: 970px;
        }
      }
      /* 以下都是pc 有大有小 可以根据自己需要添加或删除 */
      @media screen and (min-width: 1200px) {
        .box {
          width: 1170px;
        }
      }
      @media screen and (min-width: 1366px) {
        .box {
          width: 1200px;
        }
      }
      @media screen and (min-width: 1600px) {
        .box {
          width: 1400px;
        }
      }
      @media screen and (min-width: 1920px) {
        .box {
          width: 1600px;
        }
      }
      @media screen and (min-width: 2560px) {
        .box {
          width: 2200px;
        }
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

 

posted @ 2021-04-21 12:58  路宝的link  阅读(76)  评论(0)  编辑  收藏  举报