什么是响应式开发？
一个网站，它会根据用户的行为，和用户当前的设备，自动调整页面模块的大小和位置，适配兼容多个终端。，换句话说，就是页面要去响应设备。
传统的开发方式，可能是pc端开发一套，移动端再开发一套，而使用响应式的话，页面会自动根据设备进行调整，只要一套代码开发
优点：灵活性强，能快捷解决多设备显示适用的问题
缺点：效率低，兼容工作量大，代码累赘，在一定程度上改变了网站原有的布局结构
自适应布局：让同一个页面适应不同大小的屏幕，根据屏幕大小，自动缩放，也就是说，页面的总体框架是不会变的，只是把一个页面缩小或放大。
怎么做响应式？
viewport
- 什么是viewport？
viewport是虚拟窗口。
当一个页面要展示到手机上时，页面会先在viewport中渲染，如果viewport没有设置，就会用默认的980px去渲染，例如，如果移动屏幕的宽度为640px，则可能会用980px的虚拟视口渲染页面，然后缩小页面以适应640px的窗口大小。
添不添加meta都会触发viewport行为，设置meta标签只是改变viewport属性。默认的viewport会造成页面观感不适，所以需要去设置默认viewport宽度。
<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no" />
viewport具体使用：
-
layout viewport：布局视口，是整个网页文档，在不设置viewport的情况下，默认为980px，
-
visual viewport：是当前用户设备的内容窗口
-
width：设置layout viewport的宽度，为一个正整数，使用字符串“width-device”表示使用设备的宽度
-
initial-scale:设置页面的初始缩放值，为数字，可带小数
-
minimum-scale:允许用户使用的最小缩放值，为数字，可带小数
-
maximum-scale:允许用户使用的最大缩放值，为数字，可带小数
-
height：设置layout viewport的高度，很少使用
-
user-scalable:是否允许用户进行缩放，yes表示允许，no表示不允许
css像素：为web开发者提供，在css中使用的一个抽象单位
物理像素：只与设备有关，任何设备的物理像素都是固定的，比如，手机中有一个nm分辨率，那是屏幕的nm个呈像的点，一个点代表一个物理像素。
逻辑像素|设备独立像素：简称dip或dp,可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的像素，可以由viewport设置
dpr:device pixel ratio:设备像素比，通过
window.devicePixelRatio获得当前设备的像素比
dpr = 物理像素/设备独立像素
在不缩放的情况下：css像素 = 物理像素/设备独立像素
比如：有一个750px*1134px设计稿
在pc端：1 CSS像素 = 物理像素／设备独立像素 = 750 ／ 980 =0.76 px
在iPhone6： 1CSS像素 = 物理像素 ／设备独立像素 = 750 ／ 375 = 2 px
方案一：媒体查询
css的媒体查询可以让我们针对不同的媒体类型定义不同的样式，然后根据设备的宽度重新渲染页面。
屏幕分割：768px,992px,1200px
缺点：需要选取设备尺寸作为断点进行适配，但这样做比较麻烦，只能选择几个主流设备呈现适配，另外，在响应断点的瞬间，布局会带来断层式的变化，如同卡顿一下又一下
方案二：百分比布局
通过百分比，可以使页面元素的宽跟随设备的宽度的变化而变化。
缺点：计算困难，它相对的元素的属性并不是唯一的，，容易使我们布局变得困难复杂。
方案三：rem布局
rem是css的新单位，支持移动端。
rem是根据根元素html的font-size来改变的，当页面的大小发生变化时，只需要改变font-size的值，那么以rem为单位的元素大小也会发生响应变化。
缺点：必须通过js来控制fong-size的大小，js与css耦合在一起
成型方案
- 利用上面方法自己实现
- flex弹性布局，兼容性差
- 网格布局，兼容性差
响应式要点
- viewport
- 媒体查询
- 字体适配
- 百分比布局
- 图片适配
- flex
<script>
document.addEventListener("DOMContentLoaded",function(){
// 淘宝做法多写了下面这2句，修改viewport
let scale = 1 / window.devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
// 通用做法（淘宝+网易都需要），修改font-size
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
},false)
</script>
