设备像素比(device pixel ratio)
设备像素比简称为dpr，其定义了物理像素和设备独立像素的对应关系。它的值可以按下面的公式计算得到：
设备像素比 ＝ 物理像素 / 设备独立像素
在JavaScript中，可以通过window.devicePixelRatio获取到当前设备的dpr。
而在CSS中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询，对不同dpr的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)。
dip或dp,（device independent pixels，设备独立像素）与屏幕密度有关。dip可以用来辅助区分视网膜设备还是非视网膜设备。
在普通屏幕下，1个css像素 对应 1个物理像素(1:1)。
在retina 屏幕下，1个css像素对应 4个物理像素(1:4)。
例如在iPhone6设备宽度和高度为375pt * 667pt,可以理解为设备的独立像素；而其dpr为2，根据上面公式，我们可以很轻松得知其物理像素为750pt * 1334pt
meta标签
写移动端页面时，通常需要加入如下meta标签
<meta name="viewport" content="width=device-width initial-scale=1 maximum-scale=1 user-scalable=no">上面的content属性有
width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：同上
initial-sacle：初始缩放比例
maximum-sacle：最大缩放比例
minimum-scale：最小缩放比例
user-scalable：是否允许设备缩放页面
通过这个meta标签，可以让页面以设备窗口大小来友好显示页面
em和rem
使用 em 和 rem 单位可以让我们的设计更加灵活，能够控制元素整体放大缩小，而不是固定大小。
em和rem的区别
看上面的例子，em和rem好像没什么区别，其实em和rem的主要区别是以谁为标准，rem是以根元素（html）的字体大小来确定自身的值，而em是根据父元素来确定自身值
例如下面代码
<!DOCTYPE html>
<html style="font-size: 12px;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style type="text/css">
.parent {
font-size: 10px;
}
.child {
font-size: 2em;
}
</style>
</head>
<body>
<div class="child">rem字体 12px * 2 = 24px</div>
<div class="parent">
<div class="child">
em字体 父元素字体 10px * 2 = 20px
<div class="child">
em字体 父元素字体 20px * 2 = 40px
</div>
</div>
</div>
</body>
</html>效果如下
em应用场景
设计组件比如按钮，菜单和标题可能会有自己明确的字体大小。 当你修改字体大小的时候，你希望整个组件都适当缩放
通用属性这一准则将适用于在非默认字体大小的元素上的padding、 margin、 width、 height和line-height等值。
当使用 em 单位，他们使用的元素的字体大小应设置对rem单位，以保留的可扩展性，但避免继承混淆。
通常不使用 em 单位控制字体大小
rem应用场景
rem可以等比例缩放元素，只要html元素给一个标准就行，适用于多屏设备等比例适配屏幕
不要使用 em 或 rem 的场景
多列布局
布局中的列宽通常应该是 %，因此他们可以流畅适应无法预知大小的视区。
然而单一列一般仍然应使用 rem 值来设置最大宽度。
例如:
.container {
width: 100%;
max-width: 75rem;
}
这保持列的灵活，可扩展。又能防止变得太宽了。
当元素应该是严格不可缩放的时候
在一个典型的 web 设计的过程中，不会有很多部分的你不能使用伸缩性设计的布局。 不过偶尔你会遇到真的需要使用显式的固定的值，以防止缩放的元素。
采用固定的尺寸值的前提应该是，如果被缩放的话，它的结构会被打碎。 这真的不常出现，所以你想拿出那些 px 单位之前，问问自己是否使用它们是绝对必要的。
