移动端一像素border实现

在移动端开发中，我们拿到设计师给的移动端图，通常像素大小实现都是图尺寸的一半，那图中1px边框呢，我们实际写0.5px？但是问题是很多浏览器不认识0.5px。

那怎么实现移动端1像素呢？

我实现的方法，直接上代码：

css：

.border-top,

.border-right,

.border-bottom,

.border-left{

  position: relative;

}

.border-top::after,

.border-right::after,

.border-bottom::after,

.border-left::after{

  content: '';

  position: absolute;

  overflow: hidden;

}

.border-top::after {

  width: 100%;

  height: 1px;

  top: 0;

  left: 0;

  border-top: 1px solid #e8e8e8;

  -webkit-transform: scaleY(0.5);

  transform: scaleY(0.5);

}

.border-bottom::after {

  width: 100%;

  height: 1px;

  bottom: 0;

  left: 0;

  border-top: 1px solid #e8e8e8;

  -webkit-transform: scaleY(0.5);

  transform: scaleY(0.5);

}

.border-left::after {

  width: 1px;

  height: 100%;

  top: 0;

  left: 0;

  border-left: 1px solid #e8e8e8;

  -webkit-transform: scaleX(0.5);

  transform: scaleX(0.5);

}

.border-right::after {

  width: 1px;

  height: 100%;

  top: 0;

  right: 0;

  border-right: 1px solid #e8e8e8;

  -webkit-transform: scaleX(0.5);

  transform: scaleX(0.5);

}

/* 2倍屏 */

@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {

  .border-bottom::after,

  .border-top::after {

    -webkit-transform: scaleY(0.5);

    transform: scaleY(0.5);

  }

  .border-left::after,

  .border-right::after {

    -webkit-transform: scaleX(0.5);

    transform: scaleX(0.5);

  }

}

/* 3倍屏 */

@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {

  .border-bottom::after,

  .border-top::after {

    -webkit-transform: scaleY(0.33);

    transform: scaleY(0.33);

  }

  .border-left::after,

  .border-right::after {

    -webkit-transform: scaleX(0.33);

    transform: scaleX(0.33);

  }

}

html：