px、em、rem、vw、vh、dvh 与设备像素比怎么理解？
先理解原理和示例，再练习完整口述与追问。
回答要点
CSS 像素与物理像素不同；em 看使用属性，rem 看根字体；移动视口高度会变化；高清屏细线与 Canvas 分辨率分开处理。
原理拆解
px 是 CSS 参考像素，不应直接等同于一块固定物理像素。devicePixelRatio 表示当前环境下物理像素与 CSS 像素的比例，并可能受缩放、显示器切换等影响。em 用于 font-size 时通常相对父级计算字体大小，用于其他长度属性时通常相对元素自身计算字体；rem 相对根元素字体大小，适合统一字号与间距体系，但嵌套 em 会产生累积效果。
vw、vh 与视口尺寸有关，移动浏览器地址栏收起展开时，可用视口会变化。svh、lvh、dvh 分别对应较小、较大、动态视口高度；需要内容始终处于可见区域时可以根据需求使用 min-height:100dvh 并提供兼容回退，不能认为传统 100vh 在每台手机都等于当前可见高度。
高清屏 1px 细线可以根据视觉目标使用边框、渐变或缩放伪元素，但需要处理布局、圆角、缩放模糊与设备兼容，不能宣称某一种技巧在所有屏幕都精准对应一个物理像素。Canvas 为避免模糊，通常把画布实际像素尺寸设置为 CSS 尺寸乘 DPR，再缩放绘制坐标，同时控制内存和最大纹理尺寸。
示例与推演
设计稿中的 100px 通常先按 CSS 像素与布局规则实现，不能直接乘 DPR 才显示。Canvas 则可保持 CSS 尺寸 200×100，同时把实际画布设为 400×200 来适配 DPR=2，再缩放绘制坐标。字号 em 嵌套还可能逐层放大，而 rem 以根字体为基准。
易错点
DPR 可受缩放和屏幕环境变化，不一定是设备终身常数。全站使用 vw 也可能让字体过小，应设置合理上下限并检查放大体验。
参考回答可直接练习口述
px 是 CSS 参考像素，不应直接等同于一块固定物理像素。devicePixelRatio 表示当前环境下物理像素与 CSS 像素的比例，并可能受缩放、显示器切换等影响。em 用于 font-size 时通常相对父级计算字体大小，用于其他长度属性时通常相对元素自身计算字体；rem 相对根元素字体大小，适合统一字号与间距体系，但嵌套 em 会产生累积效果。