外观
设备像素、CSS 像素和 DPR 是什么关系？
CSS 像素是布局用的像素。设备像素是屏幕上的物理像素。DPR（devicePixelRatio）是一个 CSS 像素对应多少设备像素。同一 CSS 宽度，在 DPR 为 2 的屏上要用大约 2 倍的图片像素才清晰。
原理
设备独立像素是操作系统用来布局的逻辑像素，浏览器里的 CSS 像素通常跟它对齐。PPI 是物理屏幕上每英寸的像素数，用来描述屏幕密度，页面布局不直接写 PPI。
<img width="100"> 占 100 个 CSS 像素。图如果只有 100 物理像素，在 DPR 2 的屏上会被放大，看起来糊。提供 200 像素宽的资源，或用 srcset 让浏览器按 DPR 选择。
1px 边框在高 DPR 上可能看起来偏粗。需要物理细线时，用 transform: scaleY(0.5) 压一条 1px 的线，或者用 border 配合媒体查询。视口元信息要带 width=device-width, initial-scale=1，否则手机浏览器会按 980 左右的布局宽度缩放，DPR 和 CSS 像素的对应会被改掉。
追问
srcset 怎么写？
用宽度描述符让浏览器按槽位选图，或用 1x、2x 按 DPR 选。两者不要在同一组候选里混用。再配 sizes，告诉浏览器这张图最终占多宽。
canvas 为什么糊？
画布的宽高属性是绘图缓冲的像素。只设 CSS 宽高，缓冲还是默认大小，再被拉大。缓冲设成 CSS 尺寸乘 DPR，再用 scale 把绘图坐标系缩回去。
易错点
- 布局仍然用 CSS 像素。不要在每个宽度上乘 DPR。
- DPR 不是固定 2。要读
window.devicePixelRatio，它还会随浏览器缩放变化。 - 图片用了 2 倍图却不设显示尺寸，元素会按图片像素撑开。