面试题：什么是 1px 问题？如何解决 1px 问题？

这是一个经典的移动端 Web 开发面试题，涉及到物理像素、CSS 像素和设备像素比（DPR）的概念。

---

一、什么是 1px 问题？

1px 问题是指在高分辨率的移动设备（如 Retina 屏幕）上，使用 CSS 设置 border: 1px solid black 时，实际显示的边框比期望的更粗、更模糊，看起来像是 2px 或 3px，失去了“纤细”的视觉效果。

根本原因：物理像素 vs. CSS 像素 (DPR)

1. CSS 像素 (CSS Pixel)：
   • 是 Web 开发中的逻辑单位。你在 CSS 中写的 1px 指的是一个 CSS 像素。
   • 它是抽象的，由浏览器根据设备特性映射到物理屏幕上。
2. 物理像素 (Physical Pixel / Device Pixel)：
   • 是屏幕上真实的、最小的发光点。分辨率（如 1920×1080）就是指物理像素的数量。
3. 设备像素比 (Device Pixel Ratio, DPR)：
   • 定义为 物理像素数 / CSS 像素数。
   • 普通屏幕：DPR = 1 (1 个 CSS 像素 = 1 个物理像素)。
   • Retina 屏幕 (如 iPhone)：DPR = 2 或 3 (1 个 CSS 像素 = 4 或 9 个物理像素)。

问题是如何产生的？

• 当你在 DPR=2 的设备上设置 border: 1px，浏览器需要将这个 1px 的边框绘制在屏幕上。
• 由于 1 个 CSS 像素对应 2×2 个物理像素，1px 的边框无法精确地占据一个物理像素的宽度。
• 浏览器会进行插值渲染，导致边框颜色被“涂抹”在多个物理像素上，从而看起来模糊、变粗。

---

二、解决方案

✅ 方案一：使用 transform: scale() (最常用、兼容性好)

通过将一个 1px 的边框元素（如伪元素）进行缩放来实现视觉上的 0.5px 效果。

.scale-1px {
    position: relative;
    border: none;
}

.scale-1px::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    border: 1px solid #ddd;
    border-radius: 8px;
    transform: scale(0.5);
    transform-origin: 0 0;
}

• 原理：
  • 伪元素的 width 和 height 设为 200%，使其物理尺寸是容器的两倍。
  • border: 1px 在这个大元素上是正常的。
  • transform: scale(0.5) 将整个大元素（包括边框）缩小到原来的一半。
  • 结果：视觉上边框变成了 0.5px，但在 DPR=2 的设备上，它正好占据 1 个物理像素，清晰锐利。
• 优点：兼容性好，支持到较老的移动端浏览器。
• 缺点：需要额外的定位和 transform-origin 设置，代码稍复杂。

✅✅ 方案二：使用 @media 查询 + hairline (现代推荐)

利用 CSS 媒体查询，根据设备的 min-resolution 或 -webkit-min-device-pixel-ratio 来应用不同的边框。

/* 普通设备 */
.hairline {
    border: 1px solid #ddd;
}

/* DPR >= 2 的设备 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    .hairline {
        border: 0.5px solid #ddd;
    }
}

/* DPR >= 3 的设备 */
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
    .hairline {
        border: 0.33px solid #ddd;
    }
}

• 原理：现代浏览器支持 0.5px 这样的小数值边框，并能在高 DPR 设备上正确渲染为 1 个物理像素。
• 优点：代码简洁，语义清晰。
• 缺点：0.5px 在部分老版本 Android 浏览器（如 UC、QQ 浏览器）中可能被忽略或四舍五入为 1px，兼容性不如方案一。

✅ 方案三：使用 SVG 或渐变背景

用 SVG 图像或 CSS 渐变作为背景来模拟 1px 线条。

/* 使用线性渐变 */
.divider {
    height: 1px;
    background: linear-gradient(180deg, transparent, #ddd, transparent);
    /* 或者使用 SVG 背景 */
    /* background: url("data:image/svg+xml,...") 0 0 / 100% 1px; */
}

• 优点：可以实现非常精细的线条。
• 缺点：只适用于简单的线条，不适合复杂的边框（如四边都有边框的盒子）。

✅ 方案四：使用 JavaScript 动态设置

通过 JavaScript 检测设备的 DPR，并动态地给 HTML 根元素设置一个 data-dpr 属性，然后在 CSS 中使用。

// JS
const dpr = window.devicePixelRatio || 1;
document.documentElement.setAttribute('data-dpr', dpr);

/* CSS */
[data-dpr="2"] .border {
    border-width: 0.5px;
}

[data-dpr="3"] .border {
    border-width: 0.33px;
}

• 优点：灵活，可以全局控制。
• 缺点：依赖 JS，增加了复杂性。

✅✅✅ 方案五：使用 CSS 自定义属性 + @supports (前沿方案)

结合现代 CSS 特性，提供优雅降级。

.root {
    --border-width: 1px;
}

@supports (min-resolution: 2dppx) {
    .root {
        --border-width: 0.5px;
    }
}

.use-1px {
    border: var(--border-width) solid #ddd;
}

---

三、面试加分点

1. viewport 的作用：提到 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 是解决移动端布局问题的基础，它确保了 CSS 像素与设备独立像素对齐。
2. devicePixelRatio：能说出 window.devicePixelRatio 可以获取当前设备的 DPR。
3. border-image：知道可以用 border-image 结合 SVG 实现高清边框。
4. 框架解决方案：提及像 postcss-plugin-px2rem 或 lib-flexible 这样的工具库可以辅助处理。
5. 未来趋势：0.5px 支持越来越广泛，transform: scale() 仍是兼容性最好的方案。

---

总结回答示例

1px 问题是由于高 DPR 设备上，CSS 的 1px 无法对应到 1 个物理像素，导致边框变粗模糊。

主要解决方案有：

1. transform: scale(0.5)：用伪元素放大后缩小，兼容性最好。
2. @media 查询 + 0.5px：直接使用小数边框，代码简洁，现代浏览器支持良好。
3. SVG/渐变背景：用图像或渐变模拟线条。

我通常在项目中优先使用 transform: scale() 方案以保证兼容性，同时关注 0.5px 的浏览器支持情况，逐步向更简洁的方案过渡。