Martisss's blog

hello, world

0%

使用transform属性解决1px问题

发表于 更新于 分类于

问题来源

px是一个相对单位，并不是说1px就一定等于1个物理像素，设备像素比不同，1px对应的物理像素数量不同。也就是说在不同设备、不同分辨率的情况下，1px所代表的物理像素数量不一样，因此1px在屏幕上显示的宽度也不一样。

设备像素、css像素、设备独立像素、设备像素比

设备像素：设备像素又称物理像素，是设备能够控制显示的最小物理单位

css像素：px是一个相对单位，相对的是设备像素（device pixel）一般情况，页面缩放比为1，1个CSS像素等于1个设备独立像素

设备独立像素：与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念，包括了CSS像素，而至于1个虚拟像素究竟对应几个物理像素，就设计设备像素比（device pixel ratio）

设备像素比：DPR = 设备像素/设备独立像素

当设备像素比为1:1时，使用1（1×1）个设备像素显示1个CSS像素

当设备像素比为2:1时，使用4（2×2）个设备像素显示1个CSS像素

当设备像素比为3:1时，使用9（3×3）个设备像素显示1个CSS像素

设备像素比可通过window.devicePixelRatio查询

实现一条1px的线

1
<div class="A"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  .A {
    height: 1px;
    width: 800px;
    background-color: black;
}

@media screen and (-webkit-min-device-ratio: 2) {
    .A {
      transform: scaleY(0.5)
    }
}
@media screen and (-webkit-min-device-ration: 3) {
  .A {
      transform: scaleY(0.333)
    }
}

transform中的scale字段能够对元素进行缩放，当dpr=2时，（2 * 2）个物理像素对应1个设备独立像素，因此scale(0.5, 0.5)代表将1px缩放为原本的0.5倍，这样我们就得到了和dpr=1的设备上显示一样宽的1px

通过媒体查询针对不同dpr进行不同的缩放，保持各设备显示的一致性

实现一像素的边框

1
<div class="target">12345</div>
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
.target {
  position: relative;
}
.target::after{
  content: '';
  width: 200%;
  height: 200%;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #bfbfbf;
  border-radius: 4px;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .target::after {
    -webkit-transform: scale(0.5,0.5);
    transform: scale(0.5,0.5);
    -webkit-transform-origin: top left;
    transform-origin: left top;
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .target::after {
    -webkit-transform: scale(0.33,0.333);
    transform: scale(0.333,0.333);
    -webkit-transform-origin: top left;
    transform-origin: left top;
  }
}

transform-origin CSS属性用于更改一个元素变形的原点。默认原点是元素旋转中心。