drp
DPR
dpr问题是移动端web开发上需要注意的问题，用大白话说就是，代码中所设置的像素值实际上是虚拟像素，手机屏幕上的像素实际为物理像素，原始的手机，虚拟像素与物理像素是1:1覆盖的，但随着移动端屏幕的技术发展，屏幕尺寸不变的情况下，密度却增大了，就会出现逻辑1像素覆盖了多个物理像素，就造成了不清晰的问题。
dpr（devicePixelRatio）就是即物理像素/逻辑像素
在美工切图的时候需要切1倍、2倍、3倍图，也是因为这个问题。而在移动web开发中，也需要根据不同屏幕做不同的处理，目的是尽可能让逻辑像素与物理像素一一对应，这样才能达到最清晰的状态。
在js中可以获取dpr的值
window.devicePixelRatio在css中解决dpr问题应使用媒体查询
border 1像素问题
css中设置的1px，是虚拟像素，在移动屏上，drp是1的情况下，边框是正好1:1覆盖的，但在大于1的情况下，比如iPhone 6s上的drp是2，css的1像素实际上在屏幕上要覆盖两倍的物理像素，于是看上去就比较粗，如果拿原生APP去比，web就明显粗一些，就是因为实际在物理屏上覆盖了2像素的高度。
解决这个问题的思路是，根据媒体查询，在不同dpr下，利用transform中的缩放，将Y轴缩放一定比例，尽量使虚拟像素与物理像素吻合。比如dpr是1.5，则Y轴缩放0.7（因为没办法设0.75），2的情况下缩放0.5，3的情况下缩放0.3。
html
<p id="vTabs" class="vTabs border-1px">
</p>stylus
border-1px($color)
position relative
&::after
display block
width 100%
position absolute
left 0
bottom 0
border-top 1px solid $color
content ' '
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
.border-1px
&::after
transform scaleY(0.7)
-webkit-transform scaleY(0.7)
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
.border-1px
&::after
transform scaleY(0.5)
-webkit-transform scaleY(0.5)
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
.border-1px
&::after
transform scaleY(0.3)
-webkit-transform scaleY(0.3)
.vTabs
width 100%
height 40px
line-height 40px
background #ffffff
display flex
border-1px(rgba(7,17,27,0.1))图片适应
目前移动端屏的dpr基本都是2以上，我们一般考虑2和3的情况即可。
思路也是一样的，利用媒体查询不同屏幕上使用不同尺寸图片，尽量使虚拟像素与物理像素吻合。
stylus mixin
background-img($url)
background-image url($url+"@2x.png")
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
background-image url($url+"@3x.png")意思是，如果dpr大于等于3（3以上），则用3倍图，否则均用2倍图。当然这里要约定好图片的命名。
css中应用
.icon
display inline-block
vertical-align top
width 30px
height 18px
background-img('./img/brand')
background-size 100% 100%
background-repeat no-repeat张鑫旭大神的dpr解释：
http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/