viewport(视口)
许多智能手机都使用了一个比实际屏幕尺寸大很多的虚拟可视区域，主要目的就是让pc页面在智能手机端阅读时不会因为实际可视区域变形。所以你看到的页面还是普通样式，即一个全局缩小后的页面。为了让智能手机能根据媒体查询匹配对应样式，让页面在智能手机中正常显示，特意添加了一个meta标签。这个标签的主要作用就是让智能手机浏览页面时能进行优化，并且可以自定义界面可视区域的尺寸和缩放级别。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
含义为：宽为手机移动设备默认宽度，初始缩放比例为1.0，最大缩放比例为原始像素大小，不允许用户放大或者缩小;
如何识别手机尺寸通过设置meta语句：
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
width 可视区域的宽度,值可为数字或关键词device-width；
height 可视区域的高度,关键词device-height；
initial-scale 页面首次被显示时的缩放级别（0-10.0），取值为1时页面按实际尺寸显示，无任何缩放
minimum-scale 设定最小缩小比例（0-10.0），取值为1时将禁止用户缩小至实际尺寸之下
maximum-scale 设定最大放大比例（0-10.0），取值为1时将禁止用户放大至实际尺寸之上
user-scalable 设定用户是否可以缩放（yes/no），一般情况下允许
device-width 设备屏幕的宽度值
很多人常常使用initial-scale=1到非响应式网站上，这会让网站以100%宽度渲染而不会自动缩放，用户需要手动移动页面或者缩放。
请记住：如果你的网站不是响应式的，请不要使用initial-scale或者禁用缩放。
 
meta
忽略Android平台中对邮箱地址的识别
<meta name="format-detection" content="email=no" />
当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- ios7.0版本以后，safari上已看不到效果 -->
将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 可选default、black、black-translucent -->
隐藏状态栏
<meta name="apple-mobile-web-app-status-bar-style" content="blank" />
blank:消失，空白
iPhone会将看起来像电话号码的数字添加电话连接，应当关闭
<meta name="format-detection" content="telephone=no" />
detection[dɪ‘tekʃ(ə)n]侦查
 
rem
1.rem是什么?
rem(font size of the root element)是指相对于根元素的字体大小的单位
2.为什么web app要使用rem？
实现强大的屏幕适配布局(淘宝,腾讯,网易等网站都是rem布局适配)rem能等比例适配所有屏幕,根据变化html的字体大小来控制rem的大小,
在html上根据不同分辨率设置不同font-size，通过js计算出来
- 页面里除了font-size之外的其它css尺寸都使用rem作为单位
- 正文的font-size需要额外的媒介查询，并且不使用rem
vw、vh
vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。
vmin：vw和vh中较小的那个。
vmax：vw和vh中较大的那个。
vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，iOS safari 8+支持，Android browser4.4+支持，chrome for android39支持
 
dpr(设备像素比)
设备像素比（device pixel ratio）
设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系
设备像素比＝物理像素／设备独立像素（逻辑像素在x方向或者y方向）
 
物理像素（physical pixel）
一个物理像素是显示器（手机屏幕）上最小的物理显示单元，在操作系统的调度下，每一个设备都有自己的颜色值和亮度值，物理像素就是屏幕分辨率中所示的像素。
 
设备独立像素（density-independent pixel）
设备独立像素（也叫密度无关像素），可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素,然后由相关系统转换为物理像素。
 
移动端适配
公式：
html{font-size:(100px/屏幕宽度的1%（?px））vw}
解释：通过用100除以当前屏幕宽度的1%
计算出100px占当前屏幕的多少vw