移动端一像素边框解决方案

逻辑像素

如果你太明确逻辑像素是什么，可以先看看这篇介绍

css变量

如果你不太明确 css 变量的用法，可以看看阮一峰老师的教程

@media

如果你不太明确 @media，可以先百度百度

正文

先上码：

.border{
  border: 1px solid #eee;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .border {
    border: 0.5px solid #eee;
  }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
  .border {
    border: 0.333px solid #eee;
  }
}

显然，问题已经解决，但是很麻烦。
下面是优化方案，但是要先弄明白上面的代码是什么意思。

html { /* 微信小程序里，可以使用 page 替换 html */
  --px1: 1px;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
  html {
    --px1: 0.5px;
  }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
  html {
    --px1: 0.333px;
  }
}

.a{
  border: var(--px1) solid #aaa;
}
.b{
  border-bottom: var(--px1) solid #f00;
}