1px border/1像素边框/移动端1px解决方案

参考自vue的移动端ui库vux

核心内容如下

.setLine(@c: #C7C7C7) {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  border: 1px solid @c;
  color: @c;
  height: 200%;
  transform-origin: left top;
  transform: scale(0.5);
}
.vux-1px {
  &:before {
    .setLine();
  }
}

我的理解

1. 利用绝对定位，摆脱的宿主元素display属性的依赖，可以做到刚刚好的包裹住当前元素（width:100%恰好是元素的panding-box的宽度）。
2. 绝对定位不影响宿主元素的大小，对于文本内容的宿主元素可以直接将行高设置为border-box的高度，而不需要考虑边框的影响。
3. 将边框宽高设为正常值的2倍，再进行缩放，使得在支持0.5px的设备上显示更细腻的边框宽度。值得注意的是transform-origin: left top也是保证包裹宿主元素的关键。