星点 星点-屏幕尺寸工具 本系列首页
关于
版本 v1.0.0

CSS / Web 屏幕计算器

在 px、rem、vw、vh、vmin、vmax 之间自由换算,可配置根字号与视口宽高,结合 DPR 换算物理像素,并提供响应式断点与 Web 安全尺寸参考。

CSS/Web 屏幕 · 工具介绍

CSS 像素是网页布局的逻辑单位,与设备物理像素通过 DPR 关联。响应式开发中常在 px、rem、vw、vh 等单位之间换算。

本工具以视口宽高与根字号为参数,提供 px↔rem、px↔vw、px↔vh、vmin、vmax 的相互换算,并展示常见响应式断点。

所有计算均为 CSS 语义下的理论换算,实际渲染受浏览器与缩放设置影响。

CSS/Web 屏幕 · 功能特点

  • px ↔ rem 换算,根字号可配置(默认 16px)
  • px ↔ vw / vh 换算,基于视口宽高
  • vmin / vmax 与视口关系计算
  • DPR:CSS 像素 ↔ 物理像素
  • 响应式断点匹配与常用断点列表
  • Web 安全尺寸与移动端视口建议

CSS/Web 屏幕 · 使用方法

  1. 输入视口宽度、高度与根字号;
  2. 在换算区输入任意单位的数值,实时得到其它单位结果;
  3. 设置 DPR 查看对应的物理像素;
  4. 参考断点与安全尺寸说明用于布局设计。

CSS/Web 屏幕 · 常见问题

Q:1rem 等于多少 px?

默认根字号 16px 时 1rem = 16px。可在工具中修改根字号,换算结果随之变化。

Q:vw 和 vh 分别是什么?

1vw 等于视口宽度的 1%,1vh 等于视口高度的 1%。vmin 取宽高中较小者的 1%,vmax 取较大者的 1%。

Q:CSS 像素是物理像素吗?

不是。一个 CSS 像素在 DPR=2 的屏幕上对应 2×2 = 4 个物理像素。布局使用 CSS 像素,渲染时按 DPR 映射到物理像素。

相关工具

继续使用本站其它屏幕与显示参数工具:

屏幕尺寸计算器

对角线+比例→宽高,宽高→对角线/面积/周长

打开工具

宽高比计算器

自动约分、宽↔高、对角线+比例→理论宽高

打开工具

分辨率计算器

总像素、比例换算、等比例缩放、2K/4K/8K 名称

打开工具

PPI/DPI 计算器

PPI 公式、反向计算、比较、Retina 判断、清晰度

打开工具

屏幕缩放/DPR

100%/125%/150%/200% 缩放、物理↔逻辑分辨率、DPR

打开工具

设备数据库

手机/平板/笔记本/显示器/电视/投影 查询与对比

打开工具

多屏计算与对比

双/三屏总宽、总分辨率、总像素、桌面面积、PPI 对比

打开工具

图片/像素尺寸

像素+PPI↔物理尺寸、像素↔厘米/毫米、裁剪比例

打开工具

打印/DPI

物理尺寸+DPI↔像素、A4/A3/A5、计算过程

打开工具

常见屏幕尺寸表

21.5–49 英寸 × 16:9/16:10/21:9/32:9 理论宽高表

打开工具

观看距离/视角

最佳观看距离(THX/SMPTE/Retina)、FOV、PPD、角分辨率

打开工具

刷新率/视频参数

刷新率↔帧时间、像素吞吐量、显示带宽、HDMI/DP 对照

打开工具