饿了么webapp之1px边框

效果图：

关于像素和DPR：http://www.cnblogs.com/xiaohuochai/p/5494624.html

DPR = 设备像素 / CSS像素(某一方向上)

因此，如果DPR是2，即使css像素设置为1px，但在移动端设备显示是2px。例如以上tab切换栏的下边框，如何解决呢？

1.先给tab设置下边框的样式

border-1px($color)
  position: relative
  &::after
    display: block
    position: absolute
    left: 0
    bottom: 0
    width: 100%
    border-top: 1px solid $color
    content: ' '

然而，这样设置其实还是一样，

2.给tab再加一个全局样式，在不同的设备当中自由缩放适应

@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
  .border-1px
    &::after
      -webkit-transform: scaleY(0.7)
      transform: scaleY(0.7)

<div class="tab border-1px">//加上border-1px这个class
//在设备最小尺寸是1.5时，元素在y轴上的缩放是0.7，1.5*0.7=1，就实现了1倍的缩放

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
  .border-1px
    &::after
      -webkit-transform: scaleY(0.5)
      transform: scaleY(0.5)

//同理