什么是一像素问题，怎么解决一像素问题？如何画0.5px边框？

我们知道移动端设计图都是750像素，但是当设备屏幕在375像素的情况下，比如在设计稿中我们边框的宽度是1像素，然而在设备屏幕是375像素的情况下，我们应该将边框的宽度也要设置成0.5像素？

有人会想着说，那还用设置，它不自动换成0.5像素了吗？可是我们要知道在一些特别陈旧的手机设备，他是不能够认识0.5像素这个单位的，它的最低单位就是1px。我们处理这种情况的方式一般有两种：

第一种是阿里的解决方案：viewport+rem+div这个应用在淘宝的h5端，这个是修改我们的浏览器视口来操作，比较麻烦并不推荐使用。

第二种是京东的解决方案：伪类+transform。这个比较建议使用，它改变少量的内容就能将1像素的问题解决。具体实现如下图：

.border-test {
    position:relative;
    padding: 1opx;
    margin: 20px;
    display: inline-block;
}

border-test::before {
    content:
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    height: 200%;
    border: 1px solid red;
    transform-origin: 0 0;
    transform: scale(0.5);
}

这里就是京东在手机端网页实现的逻辑，大概就是说在小屏幕设备上设置一个before伪类（操作这个伪类从而不影响整体的布局），先将屏幕的宽高都放大一倍，然后使用transform属性再缩放一倍。

感谢大家观看