1. 什么是响应式

一个网站能够兼容多个不同的终端（设备），而不是为每个终端做一个特定的版本，一般用于移动网络页面

2. 怎么做响应式

1. 媒体查询

一般使用媒体查询动态调节CSS的属性

        .box {
            background-color: blue;
            width: 100px;
            height: 100px;
        }

        @media (min-width:376px) and (max-width:425px) {
            .box {
                background-color: red;
            }

        }

通过媒体查询规定移动端页面的宽度区间，例如IPhone6的375px，注意媒体查询覆盖的属性需要写到后面，当满足条件时CSS查询生效

2.隐藏元素

当宽度小于阈值时，隐藏某些不需要的元素

            @media only screen and (max-width: 1200px) {
                #head, #foot, #main{
                width: 100%;
                }
            }
            @media only screen and (max-width: 980px) {
                .right{
                    display: none;
                }
                .left{
                    width: 30%;
                }
                .center{
                    width: 70%;
                    border-right: hidden;
                }

在以上这段代码中，当页面宽度大于1200px时，右边栏显示，大于980px 右边栏不显示。

3. 一切都基于移动端的设计图

没有移动端设计图做出的一定是奥力给，想用就忍着

3.视口

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

一般页面都需要加入这一段代码

width 设置viewport宽度，为一个正整数，或字符串‘device-width’
device-width 设备宽度
height 设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置
initial-scale 默认缩放比例（初始缩放比例），为一个数字，可以带小数
minimum-scale 允许用户最小缩放比例，为一个数字，可以带小数
maximum-scale 允许用户最大缩放比例，为一个数字，可以带小数
user-scalable 是否允许手动缩放

固定页面宽度，防止用户使用双指缩放

4 特有逻辑

手机端的交互方式不一样

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

移动端响应式