1px 的烦恼：揭秘移动端 1 像素边框粗细之谜

在移动端的浩瀚世界中，设计美学愈加考究，而实现一条纤细优雅的 1px 边框却成为了技术人员的一块心病。有别于桌面端，移动端上的 1px 边框往往显得粗壮突兀，这是为什么呢？

答案的关键在于 DPR（设备像素比） 。DPR 是指设备物理像素与 CSS 像素的比率。在默认缩放为 100% 的情况下，DPR 通常为 1。然而，随着移动设备屏幕分辨率的提升，DPR 也不断攀升，以保证页面在不同设备上保持清晰。

当 DPR 大于 1 时，CSS 像素会放大，导致原本 1px 的边框在屏幕上实际渲染为 2px 或更多。这就解释了移动端 1px 边框粗细的问题。

巧妙解决：CSS 1px 边框方案

面对这一棘手难题，CSS 开发者们开动脑筋，提出了以下几种巧妙的解决方案：

1. 半像素边界（0.5px）

利用 CSS 的 border-width 属性，我们可以将边框宽度设置为 0.5px。由于屏幕不会渲染小于 1px 的线，因此 0.5px 的边框会在屏幕上显示为 1px。

border-width: 0.5px;

2. 倍数缩放（2px）

另一种方法是将边框宽度设置为 2px，然后利用 CSS 的 transform: scale() 属性对其进行缩放。将缩放比例设置为 0.5，即可实现 1px 的边框效果。

border-width: 2px;
transform: scale(0.5);

3. 使用背景图像

我们可以创建一个 1px 宽度的图像，并将其作为背景图像应用到元素上。这样，边框就成了图像的一部分，不受 DPR 的影响。

background-image: url("1px-border.png");

4. Canvas 绘制

对于需要动态生成边框的情况，我们可以使用 Canvas API 直接绘制一条 1px 的线。这种方法不受 DPR 的限制，可以精准控制边框的宽度。

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100, 0);
ctx.stroke();

结语

移动端 1px 边框粗细问题并非不可攻克。通过这些巧妙的 CSS 解决方案，开发者们能够在移动端实现纤细而美观的 1px 边框。了解 DPR 的影响并掌握这些技巧，可以帮助您在移动端的 UI 设计中游刃有余。