网络日志

前端进阶|在手机上画一条1px细线,为什么这么难?

1px问题由来

在做移动端项目时,有一个逃不掉的问题:在手机上,1px的细线会看起来更宽。其实这不仅是手机上会出现的问题,准确来说,这是高清屏的“通病”,在高清的PC上也会同样有。

高清屏是指高dpr的设备,dpr指物理像素/css像素,这样的设备其物理像素的密度更大。又可以细分为两倍屏,三倍屏。

在普通屏,1个css像素只用1个物理像素呈现;2倍屏中,1个css像素会用4个物理像素;3倍屏中则是9个。

因为只有按照这样的映射关系,一张图片在不同的设备上,才会显示相同的大小。

写到这里,似乎还没有讲清“为什么1px的线在高清屏下会更宽”这个问题。

将高清屏下的像素映射关系代入1px线的场景中,会发现:2倍屏下的线宽是2个物理像素,3倍屏下是3个。

数学中有个概念:线是没有宽度的,点是没有大小的。像素同样是没有大小的。

2倍屏的物理像素密度是普通屏的两倍,并不是每一个物理像素大小是普通屏的1/4,而是物理像素的间距是普通屏间距的1/2。

2倍屏下用两排像素去展示,自然会比普通屏下用一排像素去展示,看起来更粗。

如何修正1px问题

要解决1px问题,本质就是让高清屏用一个物理像素去展示一个css像素。

最简单粗暴的方式:在2倍屏下将1px的细线写成border:0.5px。但这种方法只在iOS上支持,安卓上会显示成被当成0px处理。

更通用的方案中,有svg和伪类元素两种。

SVG方案

SVG指的是矢量图,具体在代码中,会作为xml标签组装在html文件中。

我用svg和css两种方式分别实现了两个100px,边框宽为1的矩形;高清屏下效果如下:

<svg xmlns="custom-namespace" width="100" height="100">
    <rect
        width="100"
        height="100"
        fill="transparent"
        // 宽度1px
        stroke-width="1"
        stroke="black"
    />    
</svg>    
<div     
    style="
        width: 100px;
        height: 100px;
        // 宽度1px
        border: 1px solid black;
        box-sizing: border-box;
    "
></div>

stroke-width和border-width一样,将矩形的边宽设为了1px,但是用svg实现的矩形边框看起来却更细。

关键的地方是,使用svg标记的视口大小和使用rect标记的矩形大小是相同的。

下面用一个比较形象的图来解释:

(用svg的stroke-width画一个100px大小+1px边宽的方形)

(用css的border-width画一个100px大小+1px边宽的方形)

svg中的stroke-width画线并不是对应css中的border-width,而更像是不占空间的outline。

因为不占空间,它会以图形的边界为中心画线,一条线一半宽度在矩形内,一半在矩形外。而视口大小正好就是矩形的大小,看到的线宽就只有一半了。

为了佐证,可以把画的矩形缩小一点,不占满视口,可以看出,这时候和没有处理过的1px一样粗了。

实际操作

以上是关于svg的基础知识,但实际的业务代码肯定不会直接这样使用,因为代码的可扩展性太低。

通常会使用postcss-write-svg这个插件,让我们直接在css文件定义svg

// 定义svg函数
@svg custom-name {
  width: 4px;
  height: 4px;
  @rect {
    fill: transparent;
    width: 100%;
    height: 100%;
    stroke-width: 1;
    stroke: var(--color, black);
  }
}
.svg-retina-border {
  border: 1px solid;  
  border-image: svg(custom-name param(--color green)) 1 repeat;
}
.normal-border {
  border: px solid green;
}

伪类元素方案

这种方案借助伪类元素::before,在需要添加边框的元素之上加一个“蒙层”。

.target {
  position: relative;
}
.target::before {
  width: 200%;
  height: 200%;
  border: 1px solid #333;
  transform: scale(0.5);
  content: '';
  position: absolute;
  top: 0px;
  right: 0px;
  transform-origin: left top;
  box-sizing: border-box;
  pointer-events: none;
}

以二倍屏为例,上述是Demo代码,我们将蒙层的宽高都设置为目标元素的2倍,边框宽度是1px,然后将它进行图形变换transform: scale(0.5),整体宽高为0.5倍。

通过两次尺寸的变换,这个蒙层的大小和目标元素保持一致,但是border只有0.5px。

最后的效果如下:

<div class="retina-border">retina border</div>
<br />
<div class="normal-border">normal border</div>

该选哪种方案

两种方案的兼容性和灵活性对比如下:

  1. 兼容性

svg方案需要考虑border-image的兼容性,伪类元素方案需要考虑transform的兼容性。svg的兼容性更好。

  1. 灵活性

由于svg只能画出特定的形状,所以无法实现圆角边框。而伪类元素方案可以。伪类元素灵活性更好。

综合上述的考虑,我们的项目选择的是伪类元素方案,因为使用圆角边框的地方很多。而且从两种方案的篇幅不难看出来,这个方案的学习成本也低很多。