像素密度与分辨率
Pixel Density & Resolution
别名:像素密度设备像素比为什么图在手机上发虚手机上看图模糊高清屏RetinaDPRpixel densitydevice pixel ratio
这是什么
屏幕同时用两套像素计数：真实的设备像素与布局用的 CSS 像素，一个 CSS 像素里塞进几个设备像素就是设备像素比 DPR。手机像素密、CSS 像素少，位图被撑到 CSS 尺寸就发虚。位图按 2x/3x 提供并配 srcset 与矢量即可锐利；文字清晰度取决于字形渲染，与单位无关，rem 只用于相对根字号缩放。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 位图、图标与截图需要在手机等高密度屏上保持锐利
- 设计稿以 px 标注，开发需要换算到不同 DPR
- 排查“为什么图在 Retina 上发虚”或配置响应式图片
✕ 不适用场景
- 纯文字页面没有位图与图标，密度差异基本无感
- 只面向固定 1x 的投屏或信息屏，不涉及高密度设备
- 把所有尺寸都乘 DPR 写死，丢掉 CSS 像素这层抽象
常见形式
标清 1x
Standard 1x
一个 CSS 像素等于一个设备像素，资源原样显示
Retina 2x
Retina 2x
一个 CSS 像素摊到四个设备像素，位图要出 2x 才不虚
高密度 3x 与矢量
Dense 3x + vectors
手机常见 2x～3x，位图按此出图；图标与 Logo 用矢量，文字交给系统字体渲染
实现要点
image-set(url(logo.png) 1x, url(logo@2x.png) 2x)@media (min-resolution: 2dppx)srcset="hero@2x.png 2x"width: 24px; height: 24pxfont-size: 1rem位图按目标 DPR 出 2x/3x 资源，用 image-set() 或 srcset/sizes 让浏览器自己挑，不要只把 1x 放大。CSS 尺寸一律按 CSS 像素写，映射到设备像素交给浏览器；图标与 Logo 优先 SVG，字号与间距可用 rem 做相对缩放（这是缩放策略，与清晰度无关），发丝线保持 1px。devicePixelRatio 只用于需要精确像素计算的 canvas 或图片预览，不要拿它缩放整个界面。
平台 API
dppxdevicePixelRatiosrcsetimage-set()代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
| 体系 | 名称 |
|---|---|
| CSS | resolution media query / dppx 按屏幕密度切换资源或样式 |
| HTML | srcset / sizes 让浏览器按 DPR 选图 |
| React | window.devicePixelRatio |
相关概念
长度可以写死成 px，也可以相对别的量：rem 相对根元素字号，em 相对元素自身或父级的字号，% 相对容器，vw/vh 相对视口。用户把浏览器默认字号调大时，用 px 排的版面纹丝不动，用 rem 的会整体放大。字号、间距、圆角尽量用 rem，只有边框与发丝线才写死 px。
基础相似概念用一组按比例递增的字号定义标题与正文层级，让排版有稳定节奏。以正文基准字号乘以固定比例（如 1.25 大三度、1.333 纯四度）逐级放大，标题之间形成可预期的视觉落差，不必逐档拍脑袋定 px；也可用 sm/md/lg 尺码或 clamp() 流式档位落地。
基础搭配使用给图片写一句文本替代：信息图传达同样的信息，装饰图写空 alt 让读屏跳过，功能图描述动作而非画面。读屏用户、图片加载失败的用户和搜索引擎都靠这句话理解图在说什么。
无障碍搭配使用用硬像素边缘、有限色板与点阵字形表示「游戏机记忆」的界面视觉语言。锯齿即正确， 缩放必须整数倍，抖动网点做过渡。刻意站在抗锯齿的对立面。
风格搭配使用