移动端布局

viewport(视口)
许多智能手机都使用了一个比实际屏幕尺寸大很多的虚拟可视区域，主要目的就是让pc页面在智能手机端阅读时不会因为实际可视区域变形。所以你看到的页面还是普通样式，即一个全局缩小后的页面。为了让智能手机能根据媒体查询匹配对应样式，让页面在智能手机中正常显示，特意添加了一个meta标签。这个标签的主要作用就是让智能手机浏览页面时能进行优化，并且可以自定义界面可视区域的尺寸和缩放级别。

含义为：宽为手机移动设备默认宽度，初始缩放比例为1.0，最大缩放比例为原始像素大小，不允许用户放大或者缩小; 如何识别手机尺寸通过设置meta语句： 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平台中对邮箱地址的识别

当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari 将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式 隐藏状态栏 blank:消失，空白 iPhone会将看起来像电话号码的数字添加电话连接，应当关闭 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