一、移动端适配
重要：
H5页面窗口自动调整到设备宽度，并禁止用户缩放页面
在移动端viewport视口就是浏览器显示页面内容的屏幕区域。在viewport中有两种视口，分别表示为， visual viewport（可视视口）和layout viewport（布局视口）。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=no">
width = device-width：宽度等于当前设备的宽度
initial-scale： 初始的缩放比例（默认设置为1.0）
minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
设置meta标签的目的：
让 visual viewport（可视视口）和 layout viewport（布局视口）大小相等
设备窗口（iPhone 6 ...） 显示内容的窗口（HTML的宽）
UI > 设计网页 > 会不会根据不同设备设计不同网页？ 移动端 pc iPad
一套移动端网页 -> 适配不同大小的移动端设备 -> 前端人员 （咱们）
移动端页面 以 iPhone 6为标准 -> 网页 -> 适配 iPhone 6 设备的宽度 -- 375px;
UI > 375px? 750px?
1px = 4 ppi :
1px > css像素 （逻辑）
4 ppi > 设备像素（物理像素）
iPhone 4 css像素 320 * 480
设备像素 640 * 960
dpr : 设备像素比
设备像素 640 * 960 / css像素 320 * 480
1个 css像素 （px） = 4个设备像素 (ppi)
宽是2倍的关系 --- 1个 css像素 的宽 = 2个设备像素 的宽
高是2倍的关系 --- 1个 css像素 的高 = 2个设备像素 的高
dpr = 2;(很重要)
UI 根据 设备像素 640 * 960
css像素 320 * 480
怎么让设备像素 640 * 960 内容 显示在 css像素 320 * 480 的范围内？
设备像素/dpr(2)
font-size： 默认情况下是16px = 1em = 1rem
rem : 单位 始终是相对根标签 HTML的font-size 来显示大小的；
em : em的大小是根据自身或者最近的父元素的font-size：的值来显示的；
默认情况下： 1rem = 16px
html = font-size:100px;
1rem = html font-size:100px; 为了好计算；
注：HTML的font-size要大于12px；
思考：怎么让HTML的font-size不是固定的值？
vw和vh是视口（viewport units）单位:
vw: 视口宽度 不管屏幕的分辨率是多大 ，都是固定的 100vw = 当前设备的宽
vh: 视口高度 不管屏幕的分辨率是多大 ，都是固定的 100vh = 当前设备的高
以iPhone 6 为案例： 375 * 667 ； (标准)
375px = 100% = 100vw 1vw = 1% = 3.75px
HTML： font-size：100px = 26.66667vw
以iPhone 4 为案例： 320 * 480 ；
320px = 100% = 100vw 1vw = 1% = 3.2px
HTML： font-size：100px = 31.2vw
移动端里的文字大小设置：
一般不会给font-size设置为rem ？
在宽屏里文字大小会显示的非常大？所以我们用固定px表示文字大小；
怎么让文字的大小兼容其他设备？用媒体查询去兼容
在写移动端适配的时候，不用考虑iPad;
实现等比例布局的两种方法：
1、rem + vw
2、？
