★ ★ ★ ★ ★

移动端 1px 问题怎么解决？

⚡ 速记答案（30 秒）

高分屏上 1px 会被设备像素比放大，看起来比设计稿粗。解决方法：transform: scaleY(0.5) 缩放伪元素边框、border: 0.5px（部分浏览器支持）、linear-gradient 或 box-shadow 模拟。

📖 详细讲解

标准面试回答（推荐记住）

移动端 1px 问题是因为高分屏的设备像素比大于 1，导致 CSS 的 1px 实际会渲染成 2px 或 3px 的物理像素，看起来比设计稿粗。常见解决方案有：第一种用伪元素画线，然后 transform: scaleY(0.5) 缩放；第二种直接写 border: 0.5px，但只有部分浏览器支持；第三种用 linear-gradient 或 box-shadow 模拟细线。最常用的是 transform 缩放方案。

1px 问题原因

设备像素比 (DPR) = 物理像素 / CSS 像素

iPhone 6/7/8: DPR = 2, 1px CSS = 2px 物理
iPhone X/11/12: DPR = 3, 1px CSS = 3px 物理

✅ 面试要点

•理解设备像素比 DPR
•掌握 transform 缩放方案
•知道四边框的实现技巧

💻 代码示例

transform 缩放方案

<style>
.border-1px {
  position: relative;
}

.border-1px::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #ccc;
  transform: scaleY(0.5);
  transform-origin: 0 0;
}

/* 四边框 */
.border-all::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  border: 1px solid #ccc;
  transform: scale(0.5);
  transform-origin: 0 0;
  box-sizing: border-box;
  pointer-events: none;
}
</style>

<div class="border-1px" style="padding: 20px;">
  底部 1px 边框
</div>

🎨 效果预览