媒体查询（media query）

对媒体进行某些条件的查询就是媒体查询

<sytle>
  @media(max-width: 800px) {
        body {
          background: red;
        }
      }
</style>

媒体查询：当最大宽度是800px以下，背景是红色的
写的越晚，优先级越高，会覆盖前面的代码

下面的代码就会覆盖

修改后的代码：

<style>
      @media (max-width: 320px) {
        body {
          background: red;
        }
      }
      @media (min-width: 321px) and (max-width: 375px) {
        body {
          background: orange;
        }
      }
      @media (min-width: 376px) and (max-width: 425px) {
        body {
          background: green;
        }
      }
      @media (min-width: 426px) and (max-width: 768px) {
        body {
          background: blue;
        }
      }
      @media (min-width: 769px) {
        body {
          background: purple;
        }
      }
    </style>

用CSS文件代替具体媒体查询

实例

<!DOCTYPE html>
<html lang="zh">
  <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>移动页面demo</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      a {
        color: inherit; 
        text-decoration: none;
      }

      .logo {
        width: 60px;
        height: 60px;
        background: grey;
        border-radius: 30px;
      }
      .clearfix::after {
        content: "";
        display: block;
        clear: both;
      }
      header {
        padding: 10px;
        position: relative;
      }
      .nav {
        display: none;
        background: grey;
        margin-top: 10px;
      } /*默认看不见*/
      .nav.active {
        display: flex;
        justify-content: space-between;
      } /*激活看得见*/

      header > button {
        position: absolute;
        right: 20px;
        top: 30px;
      }

      .nav2 {
        display: none;
      }
      @media (min-width: 451px) {
        header > button {
          display: none;
        }/*媒体查询*/
        .nav {
          display: none !important;
        }/*当切换PC页面隐藏移动端的内容*/
        /*
        .nav,.nav.active{
          display: none ;
        }
        */
        .nav2 {
          display: block;
        }
        header {
          display: flex;
          align-items: center;
        }
        header .nav2 {
          display: flex;
          margin-left: 20px;
        }
        header .nav2 > li {
          margin: 0 10px;
        }
      }
    </style>
  </head>
  <body>
    <header>
      <div class="logo"></div>
      <button id="xx">菜单</button>
      <ul id="yy" class="nav" style="list-style: none">
        <li><a href="#">导航1</a></li>
        <li><a href="#">导航2</a></li>
        <li><a href="#">导航3</a></li>
        <li><a href="#">导航4</a></li>
        <li><a href="#">导航5</a></li>
      </ul>
      <ul class="nav2" style="list-style: none">
        <li><a href="#">导航1</a></li>
        <li><a href="#">导航2</a></li>
        <li><a href="#">导航3</a></li>
        <li><a href="#">导航4</a></li>
        <li><a href="#">导航5</a></li>
      </ul>
    </header>
    <script>
      xx.onclick = function () {
        yy.classList.toggle("active");
      }; /*切换CSS状态*/
    </script>
  </body>
</html>

nav是移动端页面，nav2是PC端页面

meta viewport

不成文规定：模拟980像素，进行缩放
手机端要加一个 meta： <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">（宽度等于设备宽度，缩放等于0，不能缩放，）

移动端的特点

没有hover
有touch事件
没有resize
没有滚动条

移动端页面（响应式）

媒体查询（media query）

meta viewport

移动端的特点