前言：移动端适配需要先了解很多概念
比如四个像素
物理像素
（就是手机屏幕分辨率，设备成像的最小单元。多少乘以多少，就是有多少个物理像素）
设备独立像素
这个就是另外一个概念（手机页面能操作的最小单元）
重点：由相关系统可以转化为物理像素，同样也是设备提供的一个接口（对接css像素）
css像素
也是一个虚拟概念（pc端能操作的最小单元）
位图像素
图片的最小单元（位图像素必须1:1 才能完美显示）
另外一个重点就是视口
三个视口
pc端视口
视口就是浏览器的可视区域，其宽度与浏览器宽度保持一致
深度解析：浏览器的viewport是可以看到的web内容的窗口区域，通常与渲染出来的页面大小不同，这种
时候浏览器会提供滚动条来访问所有内容。
移动端视口
中就比较复杂
因为：移动端的浏览器宽度通常240px-640px。而大多数为pc端设计的网站宽度至少
800px。如果仍然以浏览器窗口作为视口的话，网站的内容在手机上看起来会非常窄
字非常小。因此引进了三个视口。使得移动端中的视口与浏览器宽度不再关联
因为：980px的设计图 放入 视口小于700px的设备中 会显示字很小
深度解析：移动端设备在一个虚拟窗口或视口中渲染页面，这个页面通常比屏幕宽。
只能缩小渲染结果，然后在屏幕内显示所有内容。移动端宽度640px。用980px虚拟视口
渲染页面。然后缩小页面适应640px窗口的大小。
深度解析原因：许多页面没有做移动端优化，在小窗口渲染时会乱（看起来乱）。所以这种
虚拟视口是一种未做优化的网站在窄屏看起来更好的方法
带来的问题：使用媒体查询的时候针对窄屏作了优化。比如虚拟视口是980px。
那么在640px或者480px更小宽度要起作用的媒体查询就不会触发。浪费这些设计
解决：引入了‘viewport meta’标签控制视口的大小和比例
网站可以将其视口设置为特定的大小。定义width=320px；可以在小手机上精准显示
但是大屏幕大尺寸就不会渲染了。这时候就需要扩展视口
三个视口
布局视口
一般移动设备的浏览器都默认设置一个viewport元标签
定义一个虚拟的布局视口（layout），用于解决早期的页面在手机上的显示问题
IOS Android基本将这个视口的分辨率设置为980px。所以pc的网页基本能在手机
上显示，只不过看起来很小
布局视口的宽度/高度可以通过 document.documentElement.clientWidth / Height 获取
如果要设置布局视口可以用meta标签中的元标签更改 width
视觉视口
就是用户当前看到的区域。用户可以缩放操作视觉视口，不影响布局视口
视觉适口和缩放比例的关系
当前缩放值 = 理想视口宽度 / 视觉视口宽度
因为理想视口宽度不变
所以放大 视口尺寸变小
理想视口
布局适口默认值并不是一个理想的宽度，
设备独立像素 = 布局适口 为理想适口（其实就是屏幕独立像素）
布局适口 = 理想适口
<meta name="viewport" content="width=device-width">
这就是响应式布局的基础