一像素边框的问题（使不同dpr设备完美显示1px的border）

问题：不同dpr的屏幕有不同的屋里像素值，而我们css像素的1px由于不同屏幕的渲染会导致宽度并不一样；

例如： dpr为2的retina屏幕是有四个物理像素点（真实屏幕上的点）组成一个逻辑（css）像素点。所以我们写css的1px的时候会表现出不同的宽度；

知识：

 物理像素： 物理像素又被称为设备像素、设备物理像素，它是显示器（电脑、手机屏幕）最小的物理显示单位，每个物理像素由颜色值和亮度值组成。所谓的一倍屏、二倍屏(Retina)、三倍屏，指的是设备以多少物理像素来显示一个CSS像素，也就是说，多倍屏以更多更精细的物理像素点来显示一个CSS像素点，在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素对应的却是4个物理像素（参照下文田字示意图理解）。

设备像素： 设备独立像素又被称为CSS像素，是我们写CSS时所用的像素，它是一个抽像的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。

DPR(device pixel ratio):设备像素比简称为dpr，定义了物理像素和设备独立像素的对应关系：设备像素比 ＝ 物理像素 / 设备独立像素。

如果我们统一写1px宽度会 在2倍屏幕上会显示成2个物理px的宽度，3倍屏幕上显示3个物理px的宽度；

解决办法： 

1 伪元素+ transform

去掉原先的边框，增加新的元素 

.scale-1px{
  position: relative;
  border:none;
}
.scale-1px:after{
  content: '';
  position: absolute;
  bottom: 0;
  background: #000;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

有图有真相，在MacBook Pro屏幕上的效果如图

// 这里查了一下四条边框的做法 是使用transform-origin来让伪元素元素变为边框 （mdn:transform-origin CSS属性让你更改一个元素变形的原点。）

最好在使用前也判断一下，结合 JS 代码，判断是否 Retina 屏：

 

2 viewport + rem 实现

同时通过设置对应viewport的rem基准值，这种方式就可以像以前一样轻松愉快的写1px了。
在devicePixelRatio = 2 时，输出viewport

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

三倍屏的时候

<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">