1px 解决方案

Category（分类）: Browser, CSS, HTML Status: 未知

本文尽量保留原文中关于 Retina、DPR、0.5px、伪元素、border-image、背景渐变、box-shadow 和 viewport 缩放的讨论，同时合并重复内容，并补充现代浏览器和可访问性方面的说明。

一、设备尺寸、像素、分辨率与逻辑像素

设备尺寸

设备尺寸通常指屏幕对角线的物理长度，单位是英寸。它描述的是屏幕有多大，不等于屏幕能显示多少像素。

像素和分辨率

像素是组成数字图像和显示画面的基本采样单元。屏幕分辨率通常写成横向像素数 × 纵向像素数，例如 1920 × 1080。

同样大小的屏幕，分辨率越高，通常像素密度越高，文字和图片的边缘会更细腻。但实际显示质量还会受到面板、字体抗锯齿、系统缩放、浏览器缩放和图片本身的影响，不能只看分辨率。

CSS 像素与设备像素

网页中的 px 是 CSS 像素（CSS pixel），也可以理解为浏览器布局使用的逻辑单位；屏幕硬件使用的是设备物理像素（device pixel）。二者不是永远一一对应的。

window.devicePixelRatio 表示当前显示环境中物理像素与 CSS 像素的比值：

console.log(window.devicePixelRatio)

常见的高密度屏幕可能返回 2 或 3，但实际值也可能是 1.25、1.5、2.75 等。浏览器缩放、操作系统显示缩放，以及把窗口从一个屏幕拖到另一个屏幕，都可能改变这个值。

const dpr = window.devicePixelRatio || 1
const physicalWidth = cssWidth * dpr

这个公式只是没有额外缩放时的近似关系。浏览器缩放、视觉视口、CSS transform、系统缩放和像素对齐都可能改变最终栅格结果；它不能用来精确预测每一条边框会占用多少物理像素。

原文把“逻辑像素”归因于某一位产品发布者。更准确的说法是：设备无关像素、CSS 像素和系统逻辑坐标是操作系统、浏览器和 Web 标准长期形成的抽象；iPhone 4 的 Retina Display 让高密度屏幕和“一个逻辑像素对应多个物理像素”的现象广泛被开发者关注，但并不是某个人单独发明了 Web 的逻辑像素。

例如某设备的物理分辨率是 750 × 1334，CSS 视口宽度可能是 375，此时常见 DPR 为 2。当 CSS 中设置元素宽度为 10px 时，布局宽度是 10 个 CSS 像素，最终会由浏览器根据 DPR、缩放和栅格化规则映射到物理像素。

在桌面端也不能简单认为“1 CSS 像素一定等于 1 物理像素”。浏览器缩放、系统缩放和高 DPI 显示器同样会改变这种映射。

二、什么是移动端 1px 问题？

设计稿中的“1px 边框”经常希望它最终只占用一个物理像素；但网页布局中的 1px 是一个 CSS 像素。在 DPR 为 2 的设备上，直接绘制 1px 的线可能显得比设计稿更粗。

因此常见目标是：

• 在高密度屏幕上让装饰线尽量接近一个物理像素；
• 在不同 DPR、浏览器缩放和系统缩放下保持视觉一致；
• 不牺牲布局稳定性、圆角、交互区域和可访问性；
• 不为了一个边框修改整个页面的 viewport 缩放。

这里有一个重要限制：CSS 不能保证所有设备和缩放组合都精确地产生一条物理像素线。最终结果还取决于像素对齐、抗锯齿、合成和浏览器的栅格化策略。“1px 方案”更准确地说是视觉上的 hairline（细线）方案。

原文中的两张对比图可以帮助理解“CSS 1px”和“物理 1px”的差别：

三、优先选择的现代方案

1. 直接使用 0.5px 或其他分数像素

现代浏览器普遍支持分数 CSS 像素，但不同浏览器、操作系统、DPR 和缩放比例下的栅格化结果仍可能不同。可以把它作为简单场景的首选，而不是根据几年前的浏览器列表绝对判断“支持”或“不支持”。

.hairline-native {
  border-bottom: 0.5px solid #e5e5e5;
}

@media (min-resolution: 2dppx) {
  .hairline-native {
    border-bottom-width: 0.5px;
  }
}

也可以在运行时检测浏览器是否接受分数边框，但检测到“CSS 接受这个值”不等于所有屏幕都能得到理想的物理像素结果：

function supportsHalfPixelBorder() {
  const element = document.createElement('div')
  element.style.borderTop = '0.5px solid transparent'
  return element.style.borderTopWidth === '0.5px'
}

优点：代码最简单，不需要额外伪元素。

限制：不同设备上的抗锯齿和像素对齐可能不同；需要兼容旧 WebView 时不能只依赖这个方案。

2. 伪元素加 transform（通用的视觉方案）

伪元素方案的原理是：让伪元素先绘制一个 1px 的 CSS 线，再使用 transform 缩放它。父元素保留自己的布局，线条作为装饰层绝对定位。

下面的 scale(0.5) 是 DPR 为 2 时的常见示例；DPR 为 3 时可尝试约 scale(0.3333)，但最终仍需在目标设备上验证。若要动态适配，可以把缩放值写入 CSS 自定义属性；不要把固定 0.5 误认为所有高密度屏幕都适用。

单条水平线：

.hairline-bottom {
  position: relative;
}

.hairline-bottom::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: #e5e5e5;
  content: '';
  transform: scaleY(0.5);
  transform-origin: 50% 100%;
  pointer-events: none;
}

单条垂直线：

.hairline-left {
  position: relative;
}

.hairline-left::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: #e5e5e5;
  content: '';
  transform: scaleX(0.5);
  transform-origin: 0 50%;
  pointer-events: none;
}

四条边框可以把伪元素放大为父元素的两倍，再整体缩小：

.hairline-box {
  position: relative;
  border: 0;
}

.hairline-box::after {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 200%;
  height: 200%;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  content: '';
  transform: scale(0.5);
  transform-origin: 0 0;
  pointer-events: none;
}

如果父元素圆角为 4px，放大两倍的伪元素通常应使用约 8px 的圆角，再经过 scale(0.5) 还原视觉尺寸：

.hairline-box {
  --radius: 4px;
  position: relative;
  border: 0;
  border-radius: var(--radius);
}

.hairline-box::after {
  border-radius: calc(var(--radius) * 2);
}

优点：颜色、宽度、圆角和定位都容易控制，适合旧项目和需要较稳定视觉效果的场景。

注意事项：

• 伪元素是装饰层，应设置 pointer-events: none，避免遮挡按钮或链接；
• 如果元素已经使用了 ::before 或 ::after，可以增加一层包装元素；
• 原文中的 &::after 是 Sass 或 CSS Nesting 语法，复制到不支持嵌套的普通 CSS 中会失效；
• 输入框、textarea 等表单控件和其他替换元素对伪元素的支持不一致，需要把细线放到外层包装元素，或直接设置控件自身的边框；
• width: 200%、height: 200% 的方案要检查 overflow、圆角和父元素尺寸变化，复杂组件不一定适合。

四、保留并整理原文中的其他方案

1. border-image

可以准备一张专门的细线图片，再用 border-image 绘制边框：

.border-image-hairline {
  border: 1px solid transparent;
  border-image: url('./line.png') 2 stretch;
}

如果只需要底边，也可以把其他边的宽度设为 0，并按照图片切片规则调整 border-image-slice。

优点：在特定旧设备上结果稳定，可以同时绘制多条边。

缺点：换颜色和样式需要重新制作图片；高 DPI、缩放和圆角下可能出现模糊；还要处理图片资源和加载问题。现在通常优先使用 CSS 或伪元素。

2. background-image 或 CSS 渐变

把边框作为背景装饰，可以避开伪元素数量限制。下面使用 0.5px 作为 DPR2 的视觉示例；如果目标浏览器对分数背景的栅格化不稳定，应改用伪元素方案：

.background-hairline-bottom {
  background: linear-gradient(#e5e5e5, #e5e5e5) left bottom / 100% 0.5px no-repeat;
}

使用多条渐变绘制四边：

.background-hairline-box {
  background:
    linear-gradient(#000, #000) left top / 100% 0.5px no-repeat,
    linear-gradient(#000, #000) right top / 0.5px 100% no-repeat,
    linear-gradient(#000, #000) left bottom / 100% 0.5px no-repeat,
    linear-gradient(#000, #000) left top / 0.5px 100% no-repeat;
}

原文中“50% 有色、50% 透明”的渐变写法属于视觉模拟，并不能保证在每种 DPR 下都是一条物理像素线。渐变方案适合装饰性分隔线，但圆角、背景覆盖和组件尺寸变化会增加维护成本。

3. box-shadow

阴影可以模拟一条边：

.shadow-hairline {
  box-shadow: inset 0 -1px 1px -1px #c8c7cc;
}

优点：代码少，某些场景兼容性好。

缺点：它本质上是阴影，不是真正的边框，颜色和边缘容易变浅或模糊；如果需要清晰的语义边界、焦点轮廓或可访问性提示，不应使用阴影冒充。

五、viewport + rem 的历史方案

早期移动端项目常通过设置较小的 initial-scale 改变页面缩放以及 CSS 视口与物理像素的映射，再把 html 的 font-size 作为 rem 布局的配套基准。这里真正影响 px 映射的是 viewport 缩放，rem 只影响使用 rem 的尺寸；单独修改根字体大小不会让 CSS px 变细。例如 DPR 为 2 时曾使用 initial-scale=0.5，DPR 为 3 时使用约 0.3333。

原文中的示例大致如下：

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

这个方案在旧的整站 rem 适配方案中确实使用过，但现在不建议为了一个 1px 边框全局修改 viewport：

• 它会影响整个页面的布局尺寸、字体、媒体查询和第三方组件；
• maximum-scale、minimum-scale 和 user-scalable=no 可能阻碍用户缩放，损害可访问性；
• 页面缩放和系统缩放变化后，初始化脚本还要重新处理；
• 老项目迁移成本高，新项目也没有必要为细线引入全局缩放复杂度。

如果必须维护旧项目，应保证脚本在 DOM 和 viewport 元素可用后执行，并充分测试浏览器缩放、屏幕旋转、键盘弹出和辅助技术。新项目优先使用原生分数边框或局部伪元素。

六、DPR 检测与响应式注意事项

如果业务确实需要根据 DPR 添加类名，应使用完整的 window.devicePixelRatio，并允许 DPR 动态变化：

let dprMediaQuery

function updateDprClass() {
  const dpr = window.devicePixelRatio || 1
  document.documentElement.classList.toggle('is-retina', dpr >= 2)

  dprMediaQuery?.removeEventListener('change', updateDprClass)
  dprMediaQuery = window.matchMedia(`(resolution: ${dpr}dppx)`)
  dprMediaQuery.addEventListener('change', updateDprClass)
}

updateDprClass()

不过，DPR 检测并不能替代实际的 CSS 能力检测。不要把 DPR >= 2 直接等同于“必须使用 0.5px”：桌面缩放、浏览器实现、设备像素对齐和渲染引擎都会影响结果。

七、原文中的踩坑与修正

1. 水平线和垂直线的尺寸不能写反

水平线应当是 width: 100%; height: 1px，再缩放 Y 轴；垂直线应当是 width: 1px; height: 100%，再缩放 X 轴：

.vertical-line::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: #e5e5e5;
  content: '';
  transform: scaleX(0.5);
  transform-origin: 0 0;
}

放大再缩小的四边方案也可以只画左边：

.vertical-line-box::after {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 200%;
  height: 200%;
  border-left: 1px solid #e5e5e5;
  content: '';
  transform: scale(0.5);
  transform-origin: 0 0;
}

2. 伪元素并不是所有元素都可靠支持

原文调试输入框和 textarea 时发现伪元素没有显示，这个现象在表单控件中仍可能遇到。不要把伪元素直接挂在替换元素上：

<div class="field-wrapper">
  <textarea class="field" aria-label="内容"></textarea>
</div>

.field-wrapper {
  position: relative;
}

.field-wrapper::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: #e5e5e5;
  content: '';
  transform: scaleY(0.5);
  transform-origin: 50% 100%;
  pointer-events: none;
}

3. 已有伪元素和清除浮动冲突

如果组件的 ::after 已经承担清除浮动、图标或其他装饰，不能再重复定义。可以改用：

• 增加一层包装元素；
• 使用 background 或 box-shadow；
• 合并同一个伪元素的绘制逻辑；
• 直接使用分数边框；
• 对复杂组件使用独立的装饰节点。

八、不同场景如何选择？

九、可访问性与测试

细线通常是视觉装饰，不应承担唯一的信息表达。错误、选中、焦点和禁用状态还应有颜色以外的变化，并满足足够的对比度。

测试时至少覆盖：

• DPR 为 1、2、3 以及小数 DPR；
• 浏览器缩放 80%、100%、125%、200%；
• iOS Safari、Android Chrome、桌面 Chrome/Firefox/Safari；
• 横竖屏切换和窗口跨屏移动；
• 圆角、阴影、overflow: hidden 和动态高度；
• 按钮、链接、输入框的点击和键盘焦点；
• 辅助技术是否仍能识别真正的边界和状态。

十、总结

1. CSS 中的 px 是逻辑单位，不能直接等同于物理像素；
2. devicePixelRatio 会受到设备、系统缩放和浏览器缩放影响；
3. 现代浏览器可先尝试分数边框，但不能保证所有设备都得到同样的物理栅格结果；
4. 需要更稳定的局部视觉细线时，伪元素 + transform 通常比全局 viewport 缩放更合适；
5. border-image、背景渐变、box-shadow 可以作为特定场景或历史项目方案，但各有代价；
6. 表单控件、已有伪元素、圆角、焦点和可访问性是最容易被忽略的边界；
7. 不要为了一个边框使用 user-scalable=no 或禁用用户缩放。

参考资料

• MDN：Window.devicePixelRatio
• MDN：CSS 分辨率和媒体查询
• CSSOM View：devicePixelRatio
• MDN：transform
• MDN：border-image
• MDN：box-shadow
• MDN：Viewport meta 标签
• Juejin：1px 解决方案历史文章