错误。1px在CSS中并不等于1个物理像素，而是逻辑像素单位，其对应物理像素数量由设备像素比（DPR）决定，如DPR=2时1px占2×2个物理像素。
直接结论：你不需要、也不应该手动“处理”CSS像素与物理像素的比例——浏览器已经替你做了，你要做的是别干扰它，再在必要处微调。
为什么不能用 px 直接对应物理像素
写 width: 1px 时，这个 1px 永远是 CSS 像素，不是物理像素。它在 DPR=1 的设备上占 1 个物理像素，在 DPR=3 的 iPhone 上占 3×3=9 个物理像素（渲染区域）。强行让 1px 对应 1 物理像素，会导致高 DPR 设备上边框细得几乎看不见，或文字发虚——这不是 bug，是浏览器按标准做的渲染。
常见错误现象：
- UI 设计稿给的是 750px 宽（物理分辨率），你直接写
width: 750px，结果在 iPhone 上撑满屏幕但内容小得看不清 - 用
border: 1px solid #000在移动端看起来像“没画出来”，其实是被 DPR 拉宽后模糊了 - 用
background-image配置了2x图，但没加background-size，导致图片被拉伸变形
window.devicePixelRatio 该什么时候读、怎么用
它只反映当前设备的缩放能力，不是布局依据。绝大多数响应式场景下，你不该基于它动态改 rem 或 viewport 缩放——现代浏览器已通过 meta name="viewport" 和 CSS 视口规则自动协调。
立即学习“前端免费学习笔记（深入）”；
真正需要读 window.devicePixelRatio 的场景极少，典型有：
- 动态加载适配图：
srcset或 JS 切换image@2x.png时作为 fallback 判断 - Canvas 绘图：创建
canvas后需按 DPR 设置canvas.width和canvas.height，否则线条模糊 - WebGL 渲染：
gl.viewport(0, 0, width * dpr, height * dpr)才能匹配物理分辨率
注意：window.devicePixelRatio 可能随系统缩放设置变化（比如 macOS “显示→缩放”切换），且 iOS Safari 中某些版本会返回非整数（如 2.8），不要用它做精确像素计算。
媒体查询里该用 px 还是 em？min-width 到底比什么
媒体查询中的 min-width: 768px 比的是**CSS 像素宽度**，即布局视口（layout viewport）的宽度，不是物理像素，也不是设备宽度。
这意味着：
-
@media (min-width: 375px)匹配 iPhone SE（逻辑宽度 375px），不管它 DPR 是 2 还是 3 -
@media (min-resolution: 2dppx)才是按物理密度筛选，等价于min-device-pixel-ratio: 2，但兼容性差，慎用 - 不要混用：
@media (min-width: 750px) and (min-resolution: 2dppx)逻辑混乱——750px 是 CSS 像素，2dppx 是物理密度，二者无直接换算关系
真实项目中，优先用 min-width + rem 或 vw 做断点，而不是依赖 DPR 值。例如 font-size: calc(16px * (100vw / 375)) 比 JS 动态设 html 字体更稳定。
图片和边框模糊问题的本质与解法
模糊不是比例没算对，而是**渲染采样方式不匹配**：一个 CSS 像素区域被多个物理像素覆盖，但图像/边框未提供足够细节。
解决路径很明确：
- 图片：用
srcset+sizes，或 CSSbackground-image配合background-size: contain和image-set()函数 - 1px 边框：伪元素 +
transform: scaleY(0.5)（DPR=2 时）或border-image，避免用小数px（如0.33px），部分 Android 浏览器不支持 - 字体：确保
font-weight和font-smoothing合理，iOS 上-webkit-font-smoothing: antialiased有时反而加重模糊
最易被忽略的一点：viewport meta 标签里 initial-scale=1 必须存在，否则 DPR 计算基准错乱——很多“适配失效”问题根源在此，而不是像素换算本身。
