移动端一像素边框

移动端一像素边框

由于手机屏幕dpi（设备像素比）[关于dpi内容可点击这里](http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/)的不同，正常的一像素在手机端显示出来的就不是所谓的一像素，而是根据不同手机屏幕的ｄｐｉ显示不同的像素，但是一像素边框又是一个很常见的需求，故这里mark一下所谓的一像素边框。
可将下面代码写入mixin.styl文件下，加入全局样式，可直接传入颜色参数得到边框线

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

观察上述代码看到还是之前的１px，并未有特殊变化，此时我们需要使用css3新增的scaleY来进行缩放，达到所要的效果。
如下代码片段：

@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)

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

这样在将.border-1px加入到所要实现一像素边框处的class处就可以实现响应式的一像素边框了。