、夕月的博客

画一条0.5px的线

2021/3/6

# Heading

参考链接：

# 0.5px 的线由来

像素是屏幕显示最小的单位，在一个 1080p 的屏幕上，它的像素数量是 1920 * 1080，即横边有 1920 个像素，而竖边为 1080 个。

像素本身有大小,如果一个像素越小，那么在同样大小的屏幕上，需要的像素点就越多，像素就越密集，如果一英寸有 435 个像素，那么它的dpi/ppi就达到了 435。

Macbook Pro 15 寸的分辨率为 2880 x 1800，15 寸是指屏幕的对角线为 15 寸（具体为 15.4），根据长宽比换算一下得到横边为 13 寸，所以 ppi 为 2880 / 13 = 220 ppi. 像素越密集即 ppi(pixel per inch)越高，那么屏幕看起来就越细腻越高清。

在 Mac/Windows 上可以设置屏幕显示的分辨率，Mac 默认为设备分辨率的一半，它的 dpr = 2，即长和宽用 2 个像素表示 1 个像素，所以 2880 个物理像素点实际上只表示 1440 个逻辑像素。那么我们的问题来了，怎么在高清屏上画一条 0.5px 的边呢？0.5px 相当于高清屏物理像素的 1px。这样的目的是在高清屏上看起来会更细一点，效果会更好一点，例如更细的分隔线。

# 直接设置 0.5px

如果我们直接设置 0.5px，在不同的浏览器会有不同的表现，使用如下代码：

代码如下 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      .hr {
        width: 300px;
        background-color: #000;
      }
      .hr.half-px {
        height: 0.5px;
      }
      .hr.one-px {
        height: 1px;
      }
    </style>
  </head>
  <body>
    <p>0.5px</p>
    <div class="hr half-px"></div>
    <p>1px</p>
    <div class="hr one-px"></div>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

其中 Chrome 把 0.5px 四舍五入变成了 1px，而 firefox/safari 能够画出半个像素的边，并且 Chrome 会把小于 0.5px 的当成 0，而 Firefox 会把不小于 0.55px 当成 1px，Safari 是把不小于 0.75px 当成 1px，进一步在手机上观察 IOS 的 Chrome 会画出 0.5px 的边，而安卓(5.0)原生浏览器是不行的。所以直接设置 0.5px 不同浏览器的差异比较大，并且我们看到不同系统的不同浏览器对小数点的 px 有不同的处理。所以如果我们把单位设置成小数的 px 包括宽高等，其实不太可靠，因为不同浏览器表现不一样。

# 使用 scale 缩放

我们发现 Chrome/Safari 都变虚了，只有 Firefox 比较完美看起来是实的而且还很细，效果和直接设置 0.5px 一样。所以通过 transform: scale 会导致 Chrome 变虚了，而粗细几乎没有变化。需要加上transform-origin: 50% 100%。

但是经过测试，增加 transform-origin 后反而变模糊了？？

transform-origin：设置旋转元素的基点位置，默认值transform-origin:50% 50% 0;,50% 50%表示中心，50% 100%表示下底边中心

# 线性渐变 linear-gradient

inear-gradient(0deg, #fff, #000)的意思是：渐变的角度从下往上，从白色#fff 渐变到黑色#000，而且是线性的，在高清屏上，1px 的逻辑像素代表的物理（设备）像素有 2px，由于是线性渐变，所以第 1 个 px 只能是#fff，而剩下的那个像素只能是#000，这样就达到了画一半的目的。

# boxshadow

box-shadow: 0 0.5px 0 #000;

  • X offset(水平阴影的位置):0
  • Y offset(垂直阴影的位置):0.5px
  • blur(模糊距离):0
  • spread(阴影的尺寸默认为 0)
  • color(阴影的颜色):#000

# viewport（只针对于移动端）

<meta name="viewport" content="width=device-width,initial-sacle=0.5"> 其中 width=device-width 表示将 viewport 视窗的宽度调整为设备的宽度，这个宽度通常是指物理上宽度。默认的缩放比例为 1 时，如 iphone 6 竖屏的宽度为 750px，它的 dpr=2，用 2px 表示 1px，这样设置之后 viewport 的宽度就变成 375px。但是我们可以改成 0.5，viewport 的宽度就是原本的 750px，所以 1 个 px 还是 1px，正常画就行，但这样也意味着 UI 需要按 2 倍图的出，整体面面的单位都会放大一倍。

# 汇总

代码如下 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .hr {
            width: 300px;
            background-color: #000;
        }

        .hr.half-px {
            height: 0.5px;
        }

        .hr.one-px {
            height: 1px;
        }

        .hr.scale-half {
            height: 1px;
            transform: scaleY(0.5);
        }

        .hr.scale-half-transform {
            height: 1px;
            transform: scaleY(0.5);
            transform-origin: 50% 100%;
            /*要指定origin值, 要不然会模糊*/
        }

        .hr.gradient {
            height: 1px;
            background: linear-gradient(0deg, #fff, #000);
        }

        .hr.boxshadow {
            height: 1px;
            background: none;
            box-shadow: 0 0.5px 0 #000;
        }
    </style>
</head>

<body>
    <p>1px</p>
    <div class="hr one-px"></div>

    <p>0.5px</p>
    <div class="hr half-px"></div>

    <p>1px + scaleY(0.5)</p>
    <div class="hr scale-half"></div>

    <p>1px + scaleY(0.5) transform-origin</p>
    <div class="hr scale-half-transform"></div>

    <p>linear-gradient(0deg, #fff, #000)</p>
    <div class="hr gradient"></div>

    <p>box-shadow: 0 0.5px 0 #000</p>
    <div class="hr boxshadow"></div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

选择器selector