像素，移动端适配基础-526互联

物理像素：
物理分辨率：
逻辑分辨率: 显示器分辨率等价于浏览器宽度
逻辑像素：水平垂直方向分别包含了1920、1080个逻辑像素，总共2073600个
设备像素比(dpr)=物理像素/逻辑像素
获取设备像素比：

1. window.devicePixelRatio
2. @media screen and (-webkit-min-device-pixel-ratio: 2) {}

PPI: 每英寸显示的像素点数
用途：
修改client-width，让px对应最恰当的尺寸

<meta name="viewport" content="width=device-width">

显示1px的线会变粗：
由上可知：物理像素 = 设备像素比 * 逻辑像素

transform

.div {
  border-width: 1px;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .div {
    border-width: 0.5px;
  }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
  .div {
    border-width: 0.34px; /* 向上取整 */
  }
}
@media (-webkit-min-device-pixel-ratio: 4) {
  .div {
    border-width: 0.25px;
}

参考文章：

https://juejin.cn/post/6861831895123492872
https://juejin.cn/post/6862158858341580808
https://juejin.cn/post/6862516216713379847