吃透移动端 1px 的具体用法

在移动端开发中，经常会遇到 1px 的边框显示问题，因为移动端的屏幕分辨率很高，CSS 的像素一般是对应于物理像素的两倍甚至三倍。这就导致边框在高像素密度设备上可能会变得很细，有时候会留出空隙或虚化。

为了解决这个问题，可以使用下面介绍的几种方法。

方法一：使用 viewport 与 rem

我们可以通过 viewport 和 rem 的方式，在 CSS 中定义 0.5px 的线条宽度。

首先设置 viewport 的缩放比例为 1，这样一个 CSS 像素就对应于一个物理像素。接着，将网页的 html 元素的字体大小设置为 50px。这样，1rem 就对应于网页宽度的 0.5px，于是我们就可以通过 rem 来定义 0.5px 的边框了。

/* 设置 viewport 的缩放比例为 1 */
<meta name="viewport" content="width=device-width, initial-scale=1">

/* 设置html元素字体大小为50px */
html {
  font-size: 50px;
}

/* 使用 rem 定义边框 */
div {
  border: 1rem solid #333;
}

方法二：使用 transform: scale

我们可以通过 transform: scale 的缩放方式，达到 1px 的边框显示效果。具体做法是：

先设置一个带有 0.5px 的边框的元素，然后通过 transform: scale(0.5) 将其缩小一倍，此时元素的边框大小也被缩小了一倍，即显示为 1px。

/* 设置带有 0.5px 的边框的元素 */
.div1 {
  border: 0.5px solid #333;
}

/* 缩小元素，边框会显示为1px */
.div2 {
  transform: scale(0.5);
}

示例一：下划线

在一些应用中，可能会遇到需要将一段文字添加下划线的需求。这时候就可以使用上述方法来实现。

/* 外层容器，用于放置文字和下划线 */
.container {
  position: relative;
}

/* 下划线 */
.line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-bottom: 1rem solid #333;
}

/* 文字 */
.text {
  z-index: 1;
}

使用上面的 CSS 代码可以实现文字和下划线并列显示，并且下划线的宽度被定义为 1px。

示例二：边框

下面提供一个使用 transform: scale 实现 1px 边框显示的例子。

/* 正常的 1px 边框 */
.normal {
  border: 1px solid #333;
}

/* 通过transform: scale缩小元素之后，边框显示为1px */
.hack {
  border: 0.5px solid #333;
  transform: scale(0.5);
}

使用上面的两个 CSS 类可以得到一个正常的 1px 边框和一个两倍缩小的 1px 边框。