设备像素比(device pixel ratio) dpr
meta[name="viewport"]里各参数的含义为：
width: 设置layout viewport 的宽度，为一个正整数，或字符串”device-width”。
initial-scale: 设置页面的初始缩放值，为一个数字，可以带小数。
minimum-scale: 允许用户的最小缩放值，为一个数字，可以带小数。
maximum-scale: 允许用户的最大缩放值，为一个数字，可以带小数。
height: 设置layout viewport 的高度，这个属性对我们并不重要，很少使用。
user-scalable: 是否允许用户进行缩放，值为“no”或“yes”。
rem是相对于根元素的字体大小的单位，也就是html的font-size大小，浏览器默认的字体大小是16px，所以默认的1rem=16px，我们可以根据设备宽度动态设置根元素的font-size，使得以rem为单位的元素在不同终端上以相对一致的视觉效果呈现。
优点：
首先rem是css单位，相比于px固定的像素单位，rem是相对像素单位，更加的灵活。
我们在页面中写rem，由于rem是相对于根元素字体大小来计算的，那么就可以实现自适应的效果。
缺点：
需要引入一段JS代码，这样违背了样式行为分离的思想，而且耦合深，无法解耦。（但是可以使用媒体查询）
什么是vw和vh?
- vw : 1vw 等于视口宽度的1%
- vh : 1vh 等于视口高度的1%
- vmin : 选取 vw 和 vh 中最小的那个
- vmax : 选取 vw 和 vh 中最大的那个
优势：不用通过js计算，直接使用即可，但是兼容性却不如rem。
缺点：VW的完全兼容需要Android4.4+和ios8+；
rem的完全兼容需要Android2.1+和ios6+
rem＋vw才应该是最好的方案（但是兼容性不太好）
html{font-size:13.33333333vw} div { width: 2rem; height:1.37rem; }
0.5px问题
- 0.5px 只适用于iOS 8及以上
- 使用border-image实现 修改颜色麻烦, 需要替换图片 圆角需要特殊处理，并且边缘会模糊
- 使用background-image实现
- 使用box-shadow模拟边框 边框有阴影，颜色变浅
- viewport + rem 实现
- 伪类 + transform 实现 transform: scaleY(0.5);
