如何画一条真正的宽度为1px 的线

问题来源

px是一个相对单位，并不是说1px就一定等于1个物理像素，设备像素比不同，1px对应的物理像素数量不同。也就是说在不同设备、不同分辨率的情况下，1px所代表的物理像素数量不一样，因此1px在屏幕上显示的宽度也不一样。

设备像素、css像素、设备独立像素、设备像素比

设备像素：设备像素又称物理像素，是设备能够控制显示的最小物理单位

css像素：px是一个相对单位，相对的是设备像素（device pixel）一般情况，页面缩放比为1，1个CSS像素等于1个设备独立像素

设备独立像素：与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念，包括了CSS像素，而至于1个虚拟像素究竟对应几个物理像素，就设计设备像素比（device pixel ratio）

设备像素比：DPR = 设备像素/设备独立像素

当设备像素比为1:1时，使用1（1×1）个设备像素显示1个CSS像素

当设备像素比为2:1时，使用4（2×2）个设备像素显示1个CSS像素

当设备像素比为3:1时，使用9（3×3）个设备像素显示1个CSS像素

设备像素比可通过window.devicePixelRatio查询

实现一条1px的线

  <div class="A"></div>

  .A {
    height: 1px;
    width: 800px;
    background-color: black;
}
​
@media screen and (-webkit-min-device-ratio: 2) {
    .A {
      transform: scaleY(0.5)
    }
}
@media screen and (-webkit-min-device-ration: 3) {
  .A {
      transform: scaleY(0.333)
    }
}

transform中的scale字段能够对元素进行缩放，当dpr=2时，（2 * 2）个物理像素对应1个设备独立像素，因此scale(0.5, 0.5)代表将1px缩放为原本的0.5倍，这样我们就得到了和dpr=1的设备上显示一样宽的1px

通过媒体查询针对不同dpr进行不同的缩放，保持各设备显示的一致性

实现一像素的边框

  <div class="target">12345</div>

  .target {
    position: relative;
  }
  .target::after{
    content: '';
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #bfbfbf;
    border-radius: 4px;
  }
  @media screen and (-webkit-min-device-pixel-ratio: 2) {
    .target::after {
      -webkit-transform: scale(0.5,0.5);
      transform: scale(0.5,0.5);
      -webkit-transform-origin: top left;
      transform-origin: left top;
    }
  }
​
  @media screen and (-webkit-min-device-pixel-ratio: 2) {
    .target::after {
      -webkit-transform: scale(0.33,0.333);
      transform: scale(0.333,0.333);
      -webkit-transform-origin: top left;
      transform-origin: left top;
    }
  }

transform-origin CSS属性用于更改一个元素变形的原点。默认原点是元素旋转中心。