前言
retina 屏下 1px 问题是个常谈的问题，相比较普通屏，retina 屏的 1px 线会显得比较粗，设计美感欠缺；在视觉设计师眼里的 1px 是指设备像素 1px，而如果我们直接写 css 的大小 1px，那在 dpr = 2 时，则等于 2px 设备像素，dpr = 3 时，等于 3px 设备像素。所以对于要求处理 1px 的场景，我们要进行特殊处理。
实现
1、transform: scale(0.5)
可以使用 transform: scale(0.5) 进行 X、Y 轴的缩放，如下示例所示
.class1 {
height: 1px;
transform: scaleY(0.5);
}
优点是编写简单，但是如果实现上下左右四条边框会比较难搞，并且如果有嵌套存在的话，会对包含的元素产生影响，所以结合 :before 和 :after 来使用。
2、transform: scale(0.5) + :before / :after （推荐）?
此种方式能解决例如 标签上下左右边框 1px 的场景，以及有嵌套元素存在的场景，比较通用，示例如下所示
.calss1 {
position: relative;
&::after {
content:"";
position: absolute;
bottom:0px;
left:0px;
right:0px;
border-top:1px solid #666;
transform: scaleY(0.5);
}
}
3、box-shadow
利用 css 对阴影处理来模拟边框，示例如下所示，底部一条线，缺点是存在阴影不好看。
.class1 {
box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.5);
}
4、其它
还有如下等方式处理 1px 问题，但不推荐，了解即可
viewport: 将页面进行缩小处理；
border-image：切个 1px 图片来模拟；
background-image：切个 1px 图片来模拟；
linear-gradient：通过线性渐变，来实现移动端 1px 的线；
svg：基于矢量图形(svg) 在不同设备屏幕特性下具有伸缩性。
