像素，移动端适配基础
- 物理像素：
- 物理分辨率：
- 逻辑分辨率: 显示器分辨率等价于浏览器宽度
- 逻辑像素：水平垂直方向分别包含了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