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