从像素之谜说起，探寻移动端1px处理的技巧

2023-09-23 22:15:16

一打开移动端开发的大门，你是否曾陷入过1px的困惑？明明在PC端1px就是1px，可到了移动端，它却变得面目全非，甚至大于1px。这背后的原理究竟是什么呢？

在移动端，我们引入了一个关键概念：设备像素比（dpr），它等于window.devicePixelRatio，也就是设备的物理像素与逻辑像素的比值。

当dpr大于1时，逻辑像素与物理像素就不是一一对应的关系了。1个逻辑像素可能对应多个物理像素。这就导致了移动端1px往往大于1px的现象。

rem单位的福音：

rem是相对于根元素（html）的字体大小，可随根元素字体大小的变化而变化。通过调整根元素的字体大小，我们可以控制整个页面的字体大小和元素尺寸。
```
html {
  font-size: 62.5%; /* 1rem = 10px */
}

body {
  font-size: 1.6rem; /* 16px */
}
```
em单位的进阶：

em是相对于父元素的字体大小，可随父元素字体大小的变化而变化。通过调整父元素的字体大小，我们可以控制子元素的字体大小和尺寸。
```
.parent {
  font-size: 1.2em; /* 12px */
}

.child {
  font-size: 1em; /* 12px */
}
```
vw、vh、vmin、vmax单位的魅力：

vw、vh、vmin、vmax是视口单位，分别代表视口的宽度、高度、较小值和较大值。它们可以帮助我们在不同尺寸的设备上创建响应式布局。
```
.full-width {
  width: 100vw; /* 视口宽度 */
}

.full-height {
  height: 100vh; /* 视口高度 */
}
```