媒体查询1、屏幕的宽度2、浏览器的宽度以上媒体查询的引入方式是在style里面3、在style上引入媒体查询4、link

1、屏幕的宽度

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
    </div>
    </div>
</body>

</html>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .son {
        height: 100px;
        float: left;
    }

    .box .son:nth-of-type(1) {
        background: red;
    }

    .box .son:nth-of-type(2) {
        background: blue;
    }

    .box .son:nth-of-type(3) {
        background: green;
    }

    @media screen and (min-device-width: 100px) and (max-device-width: 200px) {
        .son {
            width: 33%;
        }
    }

    @media screen and (min-device-width: 201px) and (max-device-width: 300px) {
        .son {
            width: 50%;
        }
    }

    @media screen and (min-device-width: 301px) and (max-device-width: 400px) {
        .son {
            width: 100%;
        }
    }
</style>

2、浏览器的宽度

<body>
    <div class="box">
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
    </div>
    </div>
</body>

</html>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .son {
        height: 100px;
        float: left;
    }

    .box .son:nth-of-type(1) {
        background: red;
    }

    .box .son:nth-of-type(2) {
        background: blue;
    }

    .box .son:nth-of-type(3) {
        background: green;
    }

    @media screen and (max-width: 200px) {
        .son {
            width: 33%;
        }
    }

    @media screen and (min-width: 201px) and (max-width: 500px) {
        .son {
            width: 50%;
        }
    }

    @media screen and (min-width: 501px) {
        .son {
            width: 100%;
        }
    }
</style>

以上媒体查询的引入方式是在style里面

3、在style上引入媒体查询

  <body>
      <div class="box">
          <div class="son"></div>
          <div class="son"></div>
          <div class="son"></div>
      </div>
      </div>
  </body>

  </html>
  <style>
      * {
          margin: 0;
          padding: 0;
      }

      .son {
          height: 100px;
          float: left;
      }

      .box .son:nth-of-type(1) {
          background: red;
      }

      .box .son:nth-of-type(2) {
          background: blue;
      }

      .box .son:nth-of-type(3) {
          background: green;
      }
  </style>
  <style media="screen and (max-width: 200px)">
      .son {
          width: 33%;
      }
  </style>

  <style media="screen and (min-width: 201px) and (max-width: 500px)">
      .son {
          width: 50%;
      }
  </style>

  <style media="screen and (min-width: 501px)">
      .son {
          width: 100%;
      }
  </style>

4、link上面引入

  <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="./src/css1.css">
<link rel="stylesheet" href="./src/css2.css" media="screen and (max-width: 200px)">
<link rel="stylesheet" href="./src/css3.css" media="screen and (min-width: 201px) and (max-width: 500px)">
<link rel="stylesheet" href="./src/css4.css" media="screen and (min-width: 501px)">

<body>
    <div class="box">
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
    </div>
    </div>
</body>

</html>

css1.css

.son {
    height: 100px;
    float: left;
}

.box .son:nth-of-type(1) {
    background: red;
}

.box .son:nth-of-type(2) {
    background: blue;
}

.box .son:nth-of-type(3) {
    background: green;
}

css2.css

.son {
    width: 33%;
}

css3.css

.son {
    width: 50%;
}

css4.css

.son {
    width: 100%;
}