css 1px 的问题

前言

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) 在不同设备屏幕特性下具有伸缩性。