什么是响应式？

响应式布局是指同一个页面在不同屏幕尺寸下有不同的布局。传统的开放方式是pc端开发一套，移动端开发一套，有了响应式布局以后，pc和移动端只需要开发一套就够了。能够一套代码兼容多个终端。

优点：

面对不同分辨率的设置，灵活性比较强，能够快速解决多设备显示适应问题

缺点：

仅适用于不复杂的网站
代码累赘，要写很多冗余的代码，隐藏一些无用的元素，渲染页面的时间长
改变了页面原有的布局结构

响应式和自适应的区别

响应式是开发一套代码在不同尺寸的屏幕上显示出不同的布局和内容
自适应是需要开发多套代码，通过检测视口的分辨率来判断当前访问的设备，从而请求服务器返回不同的页面实现响应式布局的方法：

使用媒体查询
rem、em
百分比
vw、vh
flex弹性布局
现有的UI组件，比如bootstrap、mobile-ui等实现

在讲这些具体怎么实现响应式之前，需要了解下几个单位：

px 绝对单位，比如width:10px;不管在多大的屏幕上，宽度都是10px
rem 相对单位，是相对于根元素字体大小的单位。具体如何用下面会有详细的解释
em相对单位，是相对于父元素字体大小的单位，一般用不到，因为父级元素大小没有什么可参考性

1.媒体查询是最基础的实现响应式的方式

    @media only screen and (min-width: 375px) and (max-width: 413px) {
    // iphone 6、7、8和iphone X
      html {
        background: red;
      }
    }
    @media only screen and (max-width: 374px){
    // iphone5或者更小的尺寸，以iphone5的宽度320px的比例设置font-size
      html {
        background: blue;
      }
    }
    @media only screen and (min-width: 414px) {
    // iphone6P或者更大的尺寸，以iphone6p的宽度414px的比例设置font-size
      html {
        background: green;
      }
    }

媒体查询的弊端：媒体查询是阶梯性的，比如375px-413p是同一个布局方式，<374px和>414px又分别是不同的布局，那么378px和379px都是在375-413范围内，所以这两个屏幕尺寸显示内容是一样的，没有做到完全的响应式

2.rem和em

之前说到rem是相对于根元素字体大小的单位

// 以375px为基准，1rem=100px;
@media only screen and (min-width: 375px) and (max-width: 413px) {
// iphone 6、7、8和iphone X
  html {
    font-size: 100px; 
  }
}
@media only screen and (max-width: 374px){
// iphone5或者更小的尺寸，以iphone5的宽度320px的比例设置font-size
  html {
    font-size: 86px
  }
}
@media only screen and (min-width: 414px) {
// iphone6P或者更大的尺寸，以iphone6p的宽度414px的比例设置font-size
  html {
    font-size: 110px
  }
}

body{
    font-size: 0.16rem;/* 在iphone6上相当于font-size:16px;iphone5以下是font-size:16*0.86=13.76px;在iphone6P或更大尺寸上相当于font-size: 16*1.1=17.6px*/
}

也可以按一下这种方式来实现：默认浏览器中的文字是16px，那么就相当于1rem = 16px;但是为了更方便的根据设计稿从px换算成rem，所以可以把html根元素的font-size写成62.5%，这样1rem=10px；

    html {
      font-size: 62.5%;/* 10➗16 = 0.625*/
    }
    /*定义一个高35px，宽46px的盒子*/
    .div{
        width: 3.5rem;
        height: 4.6rem;
    }

一定要注意：使用rem时，定义font-size的代码必须放在所有css样式之前

3.百分比

百分比是相对于父元素的百分比比如：

    .box{
        height: 30%;
        width: 20%;
        padding: 10%;
    }

缺点：

计算比较困难，如果要定义一个元素的宽度和高度，必须根据设计稿换算成百分比
各个属性使用百分比，虽然都是相对于父元素的百分比，但是相对于父元素的哪个属性却是不固定的，比如：
- width和height分别现对于父元素的width和height
- margin和padding 不管是垂直方向还是水平方向都是相对于父元素的宽度
- border-radius则是相对于元素自身
- font-size和border等属性是无法用百分比设置的所以，用了百分比之后，布局容易变得更加复杂

4.vw、vh

先来了解下网页视口相关

屏幕的宽度和高度：window.screenWidth、window.screenHeight
网页视口的宽度和高度：window.innerWidth 、 window.innerHeight
body的宽度和高度：document.body.clientWidth、document.body.clientHeight

网页视口的高度=100vh
网页视口的宽度=100vw
vmax 取vh和vw两者的最大值
vmin 取vh和vw两者的最小值所以1vh是网页视高度的百分之一，1vw是网页视口宽度的百分之一

/*定义一个宽20%，高10%的盒子*/
.box {
    width: 0.2vw;
    height: 0.1vh;
}

5.flex弹性布局

css面试题4：如何实现响应式布局