1媒体查询：由设备类型、监测设备特性表达式构成。
语法：
@media 设备类型[all\screen] and (条件表达式){
css样式
}
注：and两侧必须有空格
not放在设备类型的前面（反向选择【排除某个范围】）
媒体查询：做样式微小调整
例如：
浮动
显示隐藏
文本大小
宽高
meta标签的设置：
1.H5页面窗口自动调整到设备宽度，并禁止用户缩放页面
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum- scale=1.0,user-scalable=no" />
2.忽略将页面中的数字识别为电话号码
<meta name="format-detection" content="telephone=no" />
3.忽略Android平台中对邮箱地址的识别
<meta name="format-detection" content="email=no" />
4.当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- ios7.0版本以后，safari上已看不到效果 -->
5.将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 可选default、black、black-translucent -->
Retina屏 视网膜高清显示屏
ppi : 每英寸所显示像素点的密度 （ ppi值越高 屏幕显示越清晰 ）
dpi : 每英寸所显示像素点的个数
dpr : 设备像素比例。
dpr == 物理像素（把手机上图片截图放在ps中量取的大小） / 逻辑像素（css去设置的像素）
dpr怎么获取：
根据UI设计图而定：绝大部分拿到的设计图的大小 750px/640px/
针对性对dpr进行获取：
如果设计图为640px 或者 750px 选取dpr 2
如果设计图为大于750px 选取dpr为 3
rem :
rem相对大小 ： 相对于html的font-size的值而定 默认 1rem == 16px;
rem布局（等比缩放）
计算流程：
如：设计图为750px
考虑dpr为 2
ps中量出一个元素为88px
设置css大小的时候 88px / dpr2 == 44px;
又因为 不能固定44px ( 44px固定之后就不能放大或者是缩小 )
所有 44px 转成 rem
因为 html中font-size:100px; 1rem == 100px;
44px == 0.44rem
vw ： 视口的宽的比例 100vw == 视口宽度的100%
vh ： 视口高度的比例 100vh == 视口高度的100%
vmin : 视口的宽和高进行比较 谁小我用谁
vmax ： 视口的宽和高进行比较 谁大我用谁
为了方便rem的计算：
html设置font-size的值：100px;
1rem == 100px
出现问题：100px不会自动适配
找到一个能随着视口改变的单位 vw
下面需要研究的问题： 100px == ? vw
100px == ?vw
根据设计图先确定适配的核心设备。
第一种情况：设计图为640px
设计图640px 考虑dpr 为2
640px / 2 == 320px
视口的宽 320px
100vw == 320px
1vw == 3.2px
?vw == 100px
31.25vw == 100px;
第二种情况：设计图为750px;
设计图为750px 考虑dpr为2
750px / 2 == 375px;
视口的宽 375px;
100vw == 375px;
1vw = 3.75px;
?vw == 100px;
26.67vw == 100px;
记住：
如果设计图为640px html的font-size值为31.25vw;
如果设计图为750px html的font-size值为26.67vw;
