Pixel Density & Resolution
像素密度与分辨率
Aliases:像素密度设备像素比为什么图在手机上发虚手机上看图模糊高清屏RetinaDPRpixel densitydevice pixel ratio
What is it
A screen counts pixels two ways: physical device pixels and the CSS pixels used for layout. The device pixel ratio, or DPR, is how many device pixels fill one CSS pixel. Phones pack many device pixels into few CSS pixels, so a bitmap shown at its CSS size looks blurry. Serve 2x/3x assets with srcset and vectors to stay sharp; text sharpness comes from glyph rendering, not units — rem only scales relative to the root font size.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Bitmaps, icons and screenshots must stay sharp on dense phone screens
- The design spec is annotated in px and must map onto different DPRs
- Debugging why an image looks soft on Retina, or setting up responsive images
✕ When not to use
- A text-only page with no bitmaps or icons, where density barely shows
- A fixed 1x signage or projector target with no dense displays
- Multiplying every size by DPR and hard-coding it, losing the CSS-pixel abstraction
Variants
Standard 1x
标清 1x
One CSS pixel equals one device pixel — assets show as-is
Retina 2x
Retina 2x
One CSS pixel covers four device pixels — ship 2x bitmaps
Dense 3x + vectors
高密度 3x 与矢量
Phones commonly reach 2x–3x; export bitmaps accordingly, use vectors for icons/logos and let the system render text
Implementation
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: 1remExport bitmaps at 2x/3x for the target DPR and let image-set() or srcset/sizes choose; never upscale a 1x asset. Always write CSS sizes in CSS pixels and leave the mapping to device pixels to the browser. Prefer SVG for icons and logos; rem may scale font size and spacing relative to the root (a scaling choice, not a sharpness fix), and hairlines stay at 1px. Use devicePixelRatio only for canvas or image previews that need exact pixel math, never to scale the whole UI.
Platform API
dppxdevicePixelRatiosrcsetimage-set()In code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
| Framework | Name |
|---|---|
| CSS | resolution media query / dppx Switch assets or styles by screen density |
| HTML | srcset / sizes Lets the browser pick the right crop per DPR |
| React | window.devicePixelRatio |
Related concepts
A length can be absolute (px) or relative: rem scales from the root font size, em from the element's own font size, % from the container, and vw/vh from the viewport. When a user raises the browser's default font size, px layouts refuse to move while rem-based ones grow with it. Prefer rem for type, spacing and radius; keep px for borders and hairlines.
FoundationSimilarA ratio-based set of font sizes that assigns heading and body levels a stable rhythm. Multiply a base body size by a fixed ratio (1.25 major third, 1.333 perfect fourth) to step upward, producing predictable contrast between headings instead of hand-picked pixels. Ship it as sm/md/lg tokens or fluid clamp() steps.
FoundationUsed withA text alternative for every image: informative images convey the same information, decorative images get empty alt so readers skip them, functional images describe the action rather than the pixels. Screen-reader users, users on failed image loads and search engines all lean on this one line.
AccessibilityUsed withHard pixel edges, a limited palette and bitmap faces as a console-nostalgia interface look. Aliasing is correct, scaling must be integer, dithering does the gradients. Deliberately against anti-aliasing.
StylesUsed with