移动端 1px 问题如何解决？

问题：移动端 1px 问题如何解决？

在移动端 Retina 屏幕上，1px 物理像素会变成 2px 或 3px 的逻辑像素，导致边框看起来很粗。

---

核心原因

• 设备像素比 (DPR)：Retina 屏幕 DPR=2 或 3
• CSS 的 1px = 2-3 个物理像素
• 视觉上看起来比实际粗

---

解决方案

1. 伪元素 + transform

/* 最常用方案 */
.border-1px {
  position: relative;
}
.border-1px::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
}

2. border-image

.border-1px {
  border: 1px solid transparent;
  border-image: linear-gradient(to bottom, transparent 50%, #ddd 50%) 0 0 / 1px 0 repeat-x;
}

3. viewport 缩放

<meta name="viewport" content="width=device-width, initial-scale=0.5">

4. box-shadow

.border-1px {
  box-shadow: 0 -1px 1px -1px #ddd;
}

5. 使用 rem/vw + 动态计算

/* 假设 DPR=2，则 border-width: 0.5rem */

---

方案对比

方案	优点	缺点
伪元素 +transform	兼容性好，多场景适用	代码稍多
border-image	简单	边框颜色单一
viewport 缩放	统一处理	影响整体缩放
box-shadow	简单	仅适合单边
rem 动态计算	精确	需要配合 JS

---

推荐方案

推荐使用方案 1（伪元素 + transform），原因：

• 兼容性好
• 支持多边（top/right/bottom/left）
• 可通过类名控制位置

---

知识图谱

• 父级概念：CSS
• 关联概念：
  • 响应式布局 — 移动端适配
  • 媒体查询 — 响应式断点

---

参考延伸

• CSS Tricks: Border in Retina
• 移动端像素比详解