屏幕分辨率与宽高比速查表 - 全平台设备分辨率对照大全
响应式设计最怕的不是断点不够用，而是断点设在了没有真实设备的地方：手机上没生效、平板上挤成两行、电视上元素飘到边角。这张表把视口按手机、平板、笔记本、显示器、电视五档分组，每档列出在售机型的常见物理分辨率、逻辑分辨率与宽高比，并单独收了横竖屏下真正会被用到的比例清单。判断依据不是抄别人的 media query，而是先确定这次交付必须覆盖的最窄屏和最宽屏，再从表里挑两侧的真实机型去对齐。什么时候翻它：给设计稿定安全区、给视频或封面选 16:9 还是 9:16、收到「我这台笔记本上看着不对」的反馈要复现、或跟产品讨论至少覆盖哪些机型时。Retina 的 2x/3x 是最常被忽略的一层——截图量的是物理像素，布局吃的是 CSS 逻辑像素，两者混用会让所有尺寸翻倍或缩到一半。
手机分辨率 10
320 × 480640 × 960750 × 13341080 × 19201125 × 24361170 × 25321290 × 2796720 × 12801080 × 19201440 × 2560平板分辨率 5
768 × 10241536 × 20481668 × 23882048 × 27321600 × 2560笔记本分辨率 6
1366 × 7681440 × 9001920 × 10802560 × 16003024 × 19643456 × 2234显示器分辨率 6
1280 × 7201920 × 10802560 × 14403840 × 21605120 × 28807680 × 4320电视分辨率 4
1280 × 7201920 × 10803840 × 21607680 × 4320常见宽高比 7
1:14:316:916:1021:99:161:1.91提示
- Retina 显示器的物理分辨率是逻辑分辨率的 2x 或 3x，CSS 中使用逻辑分辨率。
- 响应式设计断点常用：320px (手机)、768px (平板)、1024px (小屏笔记本)、1280px (桌面)。
- 视频制作时 16:9 是标准宽高比，社交媒体可能需要 1:1 或 9:16。
- 使用 viewport meta 标签和媒体查询适配不同设备。
- 设计稿通常按 2x 或 3x 输出，开发时除以倍率得到 CSS 尺寸。
- 竖屏短视频按 9:16（1080×1920）导出，横屏用 1920×1080；给信息流做封面时 4:5 或 1:1 比 16:9 少浪费两侧安全区。
- 4K 电视上的浏览器 CSS 视口通常只有 1920px 左右，不等于面板物理分辨率，定断点前先用设备模拟确认。
- 移动端高度用 100dvh 而非 100vh，避免浏览器地址栏收起/展开时触发布局跳动。
常见问题
常见手机屏幕分辨率有哪些？
手机常见如 1080×1920（FHD）、1440×2560（QHD）、2340×1080 等；平板如 2048×1536（iPad）、2560×1600；笔记本常见 1920×1080、2560×1440；显示器从 1920×1080 起步、4K 为 3840×2160；电视多为 3840×2160。本页按手机、平板、笔记本、显示器、电视分组列出物理分辨率与宽高比，并区分物理像素与 CSS 像素。
物理像素和 CSS 像素有什么区别？
物理像素是屏幕真实发光点；CSS 像素是浏览器布局用的逻辑单位，二者由 device pixel ratio（DPR）换算。写响应式时按 CSS 像素设计，再用 DPR 适配高清屏，避免在高 DPR 设备上元素显得过小。
做响应式设计怎么定断点？
按真实设备的视口宽度分组取代表性断点（如手机 ≤480、平板 ≤1024、笔记本或桌面 >1024），而不是只对自己的笔记本调。给视频选比例时，横屏用 16:9、竖屏短视频用 9:16。
16:9 和 9:16 怎么选？
横屏内容（电影、会议录屏、桌面演示）用 16:9；竖屏短视频（手机全屏观看）用 9:16。选错比例会导致上下或左右黑边。本页列出了各设备的常见宽高比可直接对标。
由 巧匠 维护
公开更新于 2026年7月21日，内容持续校对官方文档。