关于 1px 问题

当我们看到的视觉稿（750px）上的 1px ，实际上设计同学希望是绘制 1px 的物理像素；

当 dpr = 2 时，要实现 物理像素 1px，按理通过 逻辑像素 写成 0.5px 就可以了？

产生原因

不行！因为这种小数写法并不是所有机型/系统都支持。

如果我们这样实现，在不同浏览器/系统/机型中，实际上展现效果大不相同：

1. chrome：把小于0.5px的当成0，大于等于0.5px的当作1px
2. firefox：会把大于等于0.55px的当作1px
3. safiri:把大于等于0.75px的当作1px 进一步在手机上观察iOS的Chrome会画出0.5px的边，而安卓(5.0)原生浏览器是不行的。所以直接设置0.5px不同浏览器的差异比较大。

上面这还只是 PC 端的情况。移动端这种小数写法目前只在 iOS8+ 支持，安卓系统支持情况得看底层 Web 的实现（但目前来说还是有很大一部分是不支持的）。

解决方法

使用 伪元素+transform

.line {
  position: relative; /* 相对定位 */
 
  &::after {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #000;
    width: 300%; /* 宽度变成 dpr x 100% */
    height: 300%; /* 高度变成 dpr x 100% */
    transform: scale(0.33333); /* scale变成 1/dpr */
    transform-origin: left top; /* 更改元素的转换原点为左上角 */
  }
}