1.媒体查询

  ## 原理：设置多套不同的css样式，来适应不同的设备，不同的屏幕大小。
  ## 优点：
  1.自动识别视口宽度、高度。
  2.自动识别设备旋转方向。
  3.自动识别分辨率。
  ## 缺点：
  1.设置多套css样式，导致工作量增大。
  2.后期页面改动，不易维护。
  ## 使用：@media mediatype and|not|noly(meadia feautre){
         css-code
  }

2.rem布局

  ## 原理：由于rem不管嵌套多少层都是依据的根元素html标签下的font-size下的大小来决定，所以我们只需要，根据设备屏幕的大小不同，来动态的改变根元素html标签下的fonst-size就可以实现响应式布局。
     优点：能够实现弹性伸缩，实现 响应式布局。
     缺点：
     1.随着屏幕的变大，变小并不能看到更多的东西。
     2.必须通过js来控制根元素font-size的大小。

3.em布局

  ## 原理：原理跟rem是一样的，只是依据不相同，em依据的是父元素的font-size大小，如果父元素没有font-size就一直向上寻找，直到找到符合的父级元素。
  优点：
  1.实现局部区域的响应式布局。
  缺点：
  1.标准点不一，容易造成混乱。

4.百分比布局

## 原理：设置的百分比是相对于父元素宽度的百分比，如果没有父元素则是相对于浏览器窗口的宽度，
        通过将盒子的宽度设置为百分比，从而根据不同的屏幕来进行伸缩，不受像素的限制，内容向   两侧伸缩。
     （子元素的padding,margin不管是什么方向，都是相对于父元素的宽度）
## 优点：在不同的设备中，能够实现响应布局。
## 缺点：计算复杂。

5.vw/vh布局

原理：vh相对于视口的高度，vw相对于视口的宽度，100vh相当于整个视口的高度，100vw相当于整个视口的宽度。类似于理想状态下的百分比布局方式，计算更简单。

物理像素和css像素

## 物理像素指的是设备的像素，只和设备的硬件密度有关
##css像素是我在css中写的px，一个单位。

弹性布局

原理：通过给盒子设置对应的属性来做到横向跟垂直轴方向的伸缩，完成布局