1px问题？
什么是1px问题呢？
简单的来说就是我们开发的时候写的样式，如hight:1px;border:1px;并没有达到还原设计稿的效果。
在实际呈现上要比设计稿上的看起来更‘粗’。
那么原因是什么呢？
因为视觉设计师在制稿时，使用的是物理像素(设备像素)，而我们开发写样式的时候使用是css像素、独立像素,由于现今
的屏幕像素都很高，也就出现了`Retina Display`(视网膜屏幕)的概念，既两个单位之间存在着一个比例关系,设备像素
比`device pixel ratio`简称`dpr`，即物理像素和设备独立像素的比值。
而在设备像素比大于`1`的屏幕上，我们写的`1px`实际上是被多个物理像素渲染，这就会出现`1px`在有些屏幕上看起来
很粗的现象。
如何解决1px问题呢？
核心就在于`获取`设备像素比`dpr`,对于dpr大于1的设备做相应的处理;
调用window上的方法或者基于媒体查询：
window.devicePixelRatio`或`@media screen and (-webkit-min-device-pixel-ratio: 2) {}
//当然在一些框架中也内置了一些获取dpr的方法
如何画一个0.5px边框？
推荐使用 transform + 伪元素 ：
<style>
.box1 {
width:100px;
height:100px;
border:1px solid black;
}
.box2{
position:relative;
}
.box2::after{
position:absolute
content:'0.5px'
left:0;
top:0;
width:200px;
height:200px;
border:1px solid black;
transform :scale(0.5); //x轴 y轴两个方向都缩小0.5倍
transform-origin:left top; //缩放的基点（x,y）,不设置默认是基于`中心`，故缩放后会产生偏移
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
//当然也可以不用伪元素，直接对盒子设置两倍大小，border：1px，transform:scale(0.5);就可以画出0.5px的边框。
