概念

指网页能自动识别屏幕宽度。并自出相应调整的网页设计。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验

中小型的项目比较适合用响应式布局，同一套代码可以在pc端展示也可以在移动端展示，但是大型的项目就比较建议pc端和app端分开写代码

媒体类型

我们可以指定在哪些设备下来触发相应的样式，而不满足的设备就不触发相应的样式，这就是媒体类型

如下面的样式是只有在打印的页面才触发，在浏览器展示页面是不起作用的

   @media print{
      .box{
        font-size: 60px;
      }
    }

媒体特性

具体满足某个条件的时候才会触发，比如宽度小于xxx,高度大于xxx才触发

如下面的样式只有在页面尺寸大于700px的时候，样式才生效

    @media (min-width: 700px){
      .box{
        width: 200px;
        height: 200px;
        background: pink;
      }
    }

逻辑操作符

如下面的样式只有媒体类型为屏幕并且页面尺寸大于700小于1200才生效

@media screen and (min-width: 700px) and (max-width:1200px){
  .box{
    width: 200px;
    height: 200px;
    background: pink;
  }
}

link标签方式

 <link rel="stylesheet" href="./a.css" media="(min-width:700px)">
 <link rel="stylesheet" href="./a.css" media="(min-width: 900px)">

媒体查询的编写位置及顺序

添加到样式表的底部，对css进行优先级的覆盖，防止普通样式(所有条件都生效)对媒体查询条件覆盖
先写移动端 -> 再通过媒体查询去适配PC端：如果多条件的时候，min-width编写顺序，从小(移动端)到大(PC端以及更大的设备)进行适配；min-width方式：移动优先原则，先编写移动端设备，然后响应式过渡到PC端

  .box {
      width: 200px;
      height: 200px;
      background: blue;
   }
   @media (min-width: 700px){
      .box{
        background: pink;
      }
    }
    
   @media (min-width: 1000px){
      .box{
        background: green;
      }
    }

先写PC端 -> 再通过媒体查询去适配移动端: max-width从大到小

  .box {
      width: 200px;
      height: 200px;
      background: blue;
   }
   @media (max-width: 1000px){
      .box{
        background: pink;
      }
    }
    
   @media (max-width: 700px){
      .box{
        background: green;
      }
    }

响应式开发中推荐移动端优先，也就是推荐min-width的写法，先写移动端，再去适配PC端

响应断点(阈值)的设定

讲人话就是设置最小宽度或最大宽度等媒体查询条件时的临界尺寸到底应该选择多少

下面是推荐的断点(阈值)认定

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    .d-none {
      display: none;
    }

    @media (min-width: 576px) {
      .d-sm-none {
        display: none;
      }
    }

    @media (min-width: 768px) {
      .d-md-none {
        display: none;
      }
    }

    @media (min-width: 992px) {
      .d-lg-none {
        display: none;
      }
    }

    @media (min-width: 1200px) {
      .d-xl-none {
        display: none;
      }
    }

    @media (min-width: 1400px) {
      .d-xxl-none {
        display: none;
      }
    }
  </style>
</head>

<body>
  <div class="d-none">
    111111
  </div>
  <div class="d-sm-none">
    222222
  </div>
  <div class="d-md-none">
    333333
  </div>
  <div class="d-lg-none">
    444444
  </div>
  <div class="d-xl-none">
    555555
  </div>
  <div class="d-xxl-none">
    666666
  </div>
</body>

</html>

上面的例子只是用diplay:none;做演示，我们还可以使用浮动、定位去写

示例1

设置多个阈值的范围(包含一个通用分辨率下的样式放在最上面)
给不同阈值下的样式起名字，这样就得到了一套样式
如果想要某个页面在某种设备分辨率内显示就需要加上相应的标识(给不同阈值下的样式起的名字)，否则就使用通用样式

响应式栅格系统

它就是栅格布局 + 阈值设定

之前的例子中是不具备响应式的，因为不管在什么分辨率下都是一行。具备响应式:当满足阈值的时候才做成响应式的，不满足阈值的时候栅格就失效，就按照div默认的排列方式上下排列

如何在响应式不生效的时候让div上下排列呢？就是让一个div就沾满整行

 .row div{
      background: pink;
      border: 1px solid #000;
      grid-area: auto / auto / auto / span 12;
    }

响应式栅格布局，在不同分辨率下根据阈值进行自适应变化，如下图所示

对其显示的列数进行响应式

如下图所示(css 预编译可以解决书写繁琐的问题)，在不同分辨率下显示4列/3列/2列/1列

响应式交互

在小的设备下对某元素进行隐藏(通过点击事件还要让其显示和隐藏)，在比较大的设备下对某元素进行显示，比如响应式的交互菜单

通过checked伪类实现