前言

移动端1px的问题来源于移动端中css的1px并不等于物理分辨率的1像素，也就是dpr不等于1。现在流行的解决办法有自身进行缩放，改变viewport的initial-scale值等，这些方法都有各自的优点和缺点，这里分享一种通过纯css的适配方法。

实现

知识基础

css3引入了媒体查询(@media块)可以对媒体设备查询相应的支持并应用自己的css。其中有一个比较新的媒体特性描述符叫做resolution，可以查询设备的像素密度。其中有4个可以用的单位

1. dpi 表示每英寸的点数
2. dpcm 表示每厘米的点数
3. dppx 每px的点数
4. x dppx的别名

其中dppx和我们熟知的dpr是相等的，这样就可以通过查询resolution的值来应用我们的css

<div>
  <div class="test normal"></div>
  <div class="test c"></div>
</div>

.test {
  margin: 2rem;
  width: 10rem;
  height: 10rem;
  border: 1px solid black;
}
@media (resolution: 2dppx) {
  .c {
    border: 0.5px solid black;
  }
}
@media (resolution: 3dppx) {
  .c {
    border: 0.333px solid black;
  }
}
@media (resolution: 2.75dppx) {
  .c {
    border: 0.36px solid black;
  }
}

在我的手机上(dpr为2.75)得到如图的样子

注意事项

resolution的媒体查询兼容性不是很好，对于ios safari来讲是完全不支持的， 图片来源caniuse

另一种非标准的媒体特性描述符 -webkit-device-pixel-ratio

-webkit-device-pixel-ratio是resolution的一个非标准替代方案，查询的数值没有单位是一个数字表示dpr，以上的css和下面的是等价的

@media (-webkit-device-pixel-ratio: 2) {
  .c {
    border: 0.5px solid black;
  }
}
@media (-webkit-device-pixel-ratio: 3) {
  .c {
    border: 0.333px solid black;
  }
}
@media (-webkit-device-pixel-ratio: 2.75) {
  .c {
    border: 0.36px solid black;
  }
}

-webkit-device-pixel-ratio的兼容性