CSS 像素与设备像素
设备像素（物理像素）是屏幕上真实的发光点；CSS 像素是浏览器排版用的逻辑像素。iPhone 标称 375px 宽，是指 CSS 像素；它的物理像素是 1125px，设备像素比（DPR）为 3。
理解两者的意义在于：写 width: 100px 在普通屏和 Retina 屏上看起来一样大（都是 100 CSS 像素），但 Retina 屏用了 3 倍的物理像素来渲染，所以更清晰。做 1px 边框、高清图片（@2x/@3x）时就会用到这个概念。
- CSS 像素：布局使用的逻辑单位，与设备无关
- 设备像素：屏幕物理点，DPR = 设备像素 / CSS 像素
- 高清图方案：用 srcset 提供 2x/3x 图，浏览器按 DPR 自动选
JS
// 用 JS 查看当前设备的像素比与视口 console.log('设备像素比 DPR =', window.devicePixelRatio); console.log('视口宽度 =', window.innerWidth, 'CSS 像素'); console.log('屏幕宽度 =', window.screen.width, 'CSS 像素'); // 监听缩放：DPR 不变，但 innerWidth 会变 window.addEventListener('resize', () => { console.log('resize:', window.innerWidth + 'px'); });
本节要点CSS 像素决定布局大小，设备像素决定清晰度；DPR 是两者比值，做高清图与 1px 边框时必须理解。
