移动端实现1px

在移动端网页开发中，ui设计稿的边框设为1px，用css实现出来，我们会发现有些机型显示的边框实际比1px粗一些，是什么导致了这1px的偏差呢，这里就要引出dpr的概念。

1.什么是dpr(devicePixelRatio)

dpr = 设备物理像素/设备独立像素
什么是设备物理像素，什么是设备独立像素，这些都不重要(详细讲解参考https://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/)，重要的是你需要知道：
dpr = 设备实际显示的像素比/css像素比

比如css像素为1，设备的dpr为2，那么屏幕上实际显示的像素就是css像素*dpr，也就是2px。

其中dpr可以通过css或者js查询出来，知道了css像素与实际显示像素的缩放比，那么就可以利用transform: scale()对1px进行缩放。

2.利用dpr适配1px

知道了什么是dpr，那么如何让利用dpr来适配1px呢。
css实现(以下边框为例)：
css中可以利用media查询dpr

.scale-1px {
  position: relative;
  border: none;
  &:after {
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    width: 100%;
    height: 1px;
  }
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .scale-1px:after {
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
  }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
  .scale-1px:after {
      -webkit-transform: scaleY(0.33);
      transform: scaleY(0.33);
  }
}