移动端1px实现

移动端1px实现

Posted by SkioFox on January 10, 2018

移动端1px实现

为什么要实现特殊的1px?

由于手机端的dpr原因会导致css像素的1px会被实际显示成2px,3px。我们通过书写css伪类的方式实现下面距离是下边框实现

/* mixin.styl */
border-1px($color)
  position: relative
  &:after
    display: block
    position: absolute
    left: 0
    bottom: 0
    width: 100%
    border-top: 1px solid $color
    content: ' '
/*  base.styl */
@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)

类似的其他边框也可以用同样的方法实现