移动端媒体查询

1）媒体查询概念：
。可以让我们根据设备显示器的特性（如 视口宽度、屏幕比例、设备方向：横向或纵向 ）为其设定CSS样式；
。使用媒体查询，可以在 不改变页面内容 的情况下，为特定的一些输出设备定制显示效果；
。媒体查询由 媒体类型 和 一个或多个检测媒体特性的条件表达式 组成；
。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。
。媒体查询 写在CSS样式代码的最后 ，CSS是层叠样式表，在同一特殊性下，靠后的的样式会重叠前面
的样式
例：

@media 设备类型 and (设备特征){ 
	div{ width:100px;height:100px;} 
}

2）移动端相关
meta标签设置
（1）HTML5页面窗口自动调整到设备宽度并禁止用户缩放页面

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

（2）忽略将页面中的数字识别为电话号码（iPhone会将看起来像电话号码的数字添加电话连接，应当
关闭）

<meta name="format-detection" content="telephone=no" />

（3）忽略Android平台中对邮箱地址的识别

<meta name="format-detection" content= " email=no" />

（4）通过快捷方式打开时全屏显示

<meta name="apple-mobile-web-app-capable" content="yes" />

（5）隐藏状态栏

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

viewport
设置viewport

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

每个属性对应的意思是：
。width：设置layout viewport的宽度（正整数）
。height：设置layout viewport的高度（正整数）
。initial-scal：设置页面的初始缩放（数字（可带小数））
。maximum-scale：允许用户的最大缩放值（数字（可带小数））
。minimum-scale：允许用户的最小缩放值（数字（可带小数））
。user-scalable：是否允许用户进行缩放

DPR
。设备像素比(device pixel ratio )简称 dpr
。设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系。
公式：
。设备像素比 = 物理像素 / 逻辑像素(px)

dpr > 1 高清屏
dpr = 1 普通屏
注：ppi和dpi都指屏幕像素密度，Android喜欢用dpi，IOS喜欢用ppi

rem、em
（1）px为单位
使用“px”来设置文本比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的
Web页面时，改变了浏览器的字体大小，这时会使用我们的Web页面布局被打破。因此，提出了使用
“em”来定义Web页面的字体。
（2）em为单位
使用 “px”为单位是比较方便，而又一致，但在浏览器中放大或缩放浏览页面时会存在一个问题，要解决
这个问题，我们可以使用“em”单位。

1 ÷ 父元素的font-size × 需要转换的像素值 = em值

（3）但是“em”是相对于其父元素来设置字体大小，这样又会存在一个问题，进行任何元素设置，都有
可能需要知道他父元素的大小。而rem是相对于根元素< html>，所以我们只需要在根元素确定一个参考
值（例：16px）。
媒体查询+rem

@media all and (max-width:320px){
	 html{font-size：12px;} 
 }
@media all and (max-width:321px) and (max-width:375px){ 
	html{font-size：14px;} 
}
@media all and (min-width:376px){ 
	html{font-size：16px;}
 }