Skip to main content
CalculoraCalculora

金融与商业

金融计算器投资与规划个人理财房地产投资商业工具创业与软件企业

数学与技术

数学计算器工程工具物理工具开发者工具学校工具

健康与生活

医疗工具智能工具随机生成器

创作者与专项

创作者经济伊斯兰工具可持续发展游戏

转换器

单位换算器长度换算器重量换算器温度转换器→ 单位换算器

随机生成器

随机数生成器密码强度检测器幸运转盘抛硬币模拟器骰子模拟器时区重叠计算器→ 随机生成器
文件转换器

PDF 工具

将PDF转换为JPG将PDF转换为PNG将 PDF 转换为 TXT将 PDF 转换为 GIF将 PDF 转换为 WebP将 PDF 转换为 SVG将 PDF 转换为 DOCX将PDF转换为Excel将PDF转换为PowerPoint将PDF转换为HTML将PDF转换为Markdown将PDF转换为TIFF

图片转换器

将JPG转换为PNG将PNG转换为JPG将PNG转换为WebP将 WebP 转换为 PNG将 WebP 转换为 JPG将 JPG 转换为 WebP将 SVG 转换为 PNG将SVG转换为JPG将SVG转换为WebP将BMP转换为PNG将BMP转换为JPG将BMP转换为WebP

高级图像

将HEIC转换为JPG将HEIC转换为PNG将TIFF转换为JPG将TIFF转换为PNG将JPG转换为TIFF将PNG转换为TIFF将JPG转换为ICO将PNG转换为ICO将 JPEG 转换为 AVIF将PNG转换为AVIF

GIF 和动画

将GIF帧转换为PNG将GIF帧转换为JPG将 GIF 转换为单个帧 (PNG/JPEG)将 PNG 转换为 GIF将 JPG 转换为 GIF将 GIF 转换为 WebP

编辑

添加水印图像对象移除在浏览器中即时调整图片大小在线压缩图片 — 减小文件大小,保持画质
数学速度挑战心算挑战词汇猜谜宾特和瓦拉德数独2048
货币转换器
CalculoraCalculora

一站式计算器平台。满足各种需求的免费、快速、准确工具。

计算器输入内容100%保密——所有计算都在您的浏览器中进行,绝不会发送到我们的服务器永远免费 — 无付费墙,无订阅,无需账户

热门

  • BMI计算器
  • 贷款计算器
  • 年龄计算器
  • 抵押贷款计算器
  • 百分比计算器
  • 科学计算器

数学

  • 统计计算器
  • 方程求解器
  • 分数计算器
  • 质因数分解计算器
  • 最大公约数与最小公倍数计算器
  • 对数计算器

金融

  • 财务独立提前退休计算器
  • 债务滚雪球计算器
  • 投资计算器
  • 退休计算器
  • 薪资计算器
  • 投资回报率计算器

法律信息

  • 查看全部
  • 分类
  • 货币转换器
  • 网站地图
  • 游戏与趣味工具
  • 关于我们
  • 联系我们
  • 隐私政策
  • 服务条款
  • 免责声明

语言

  • enEnglish
  • arالعربية
  • esEspañol
  • deDeutsch
  • frFrançais
  • hiहिन्दी
  • idBahasa Indonesia
  • itItaliano
  • ja日本語
  • ko한국어
  • ptPortuguês
  • ruРусский
  • trTürkçe
  • viTiếng Việt
  • bnবাংলা
  • zh中文
  • nlNederlands
  • plPolski
  • ukУкраїнська
  • msBahasa Melayu
  • thภาษาไทย

© 2026 Calculora. 版权所有。

使用构建 — 100% 免费

轻量快速——Cookie和分析仅在您同意的情况下运行

  1. 首页
  2. 开发者工具
  3. CSS 单位转换器

CSS 单位转换器

使用你自己的基础字体大小和视口尺寸,即时在 px、rem、em、pt、vw、vh 和 % 之间转换——不用再去猜 1.5rem 到底相当于多少像素。

什么是CSS 单位转换器?

CSS 支持多种不同的尺寸单位——绝对单位如 px 和 pt,以及相对单位如 rem、em、vw、vh 和 %。相对单位对于响应式、无障碍设计至关重要(rem 尤其能尊重用户浏览器的字体大小偏好设置),但在脑海中进行单位换算实际上相当困难,因为结果取决于上下文:根字体大小、当前元素的字体大小,或视口尺寸。

这款转换器会替你完成这些计算:设置你的基础字体大小、视口尺寸以及要转换的数值,即可立即看到在其他每个单位下的等效值——无论是将设计稿的像素测量值转换为响应式的 rem/vw 值,还是仔细核对某条现有 CSS 规则在屏幕上实际渲染出的效果,都非常有用。

公式

1rem = 1em = 基础字体大小(默认 16px)
1pt = 96/72 px ≈ 1.333px
1vw = 视口宽度 / 100
1vh = 视口高度 / 100
1% = 参考值 / 100

如何计算

  1. 输入你想要转换的数值,并选择其起始单位。
  2. 设置你的基础字体大小(默认为浏览器标准的 16px)。
  3. 对于 vw/vh 转换,请输入目标视口的宽度和高度。
  4. 立即查看在其他每个单位下的等效值。

示例

在基础字体大小为 16px 时,1.5rem 转换为 24px。在视口宽度为 1440px 时,5vw 转换为 72px。

主要优势

  • 在一处即可完成全部 7 种常用 CSS 单位之间的转换
  • 使用你实际的基础字体大小和视口,而非固定的假设值
  • 输入的同时即时给出结果——无需打开浏览器开发者工具
  • 免费、无需注册,完全在你的浏览器中运行

需要避免的常见错误

  • 假设 1rem 始终等于 16px,而不检查根字体大小是否被更改过
  • 在移动端全高布局中使用 vh,却没有考虑浏览器地址栏的行为
  • 嵌套基于 em 的字体大小,却对其意外叠加感到意外
  • 在同一组件内不一致地混用 px 和 rem,破坏了无障碍缩放

专业提示

  • 字体大小优先使用 rem 而非 em,以避免嵌套组件中出现意外的叠加
  • 如果目标浏览器支持,移动端全屏布局请使用 dvh/svh 而不是 vh
  • 在整个设计系统中保持一致的基础字体大小,使 rem 转换保持可预测
  • 在转换像素级精确设计时,将间距转换为 rem,但将边框宽度等细节保留为 px

关键术语解释

根字体大小(Root font size):设置在 html 元素上的字体大小,所有 rem 单位都相对于它
视口(Viewport):浏览器窗口中网页的可见区域
绝对单位(Absolute unit):像 px 或 pt 这样具有固定真实尺寸、不依赖任何上下文的单位
相对单位(Relative unit):像 rem、em、vw 或 % 这样的单位,其大小取决于另一个值

常见用例

  • 将设计师基于像素的 Figma/Sketch 规格转换为无障碍 CSS 所需的 rem 值
  • 检查基于 vw 的响应式字体大小在特定屏幕宽度下实际渲染出的效果
  • 将基于 pt 的旧版打印或邮件 CSS 转换为符合网页标准的 px 或 rem
  • 审核设计系统的间距比例在不同单位之间是否保持一致
  • 在代码审查过程中快速核对某个 CSS 数值,而无需打开开发者工具

常见问题

rem 和 em 有什么区别?
rem 始终相对于根(html)元素的字体大小,因此无论元素嵌套多深,它都保持一致。em 则相对于当前元素自身的字体大小,这意味着在嵌套时会产生叠加效应——为简单起见,本工具将两者视为相同,都使用你设置的基础字体大小进行计算。
为什么 1rem 通常等于 16px?
16px 是几乎所有浏览器中根 html 元素的默认字体大小。由于 rem 相对于该根字体大小,因此除非页面(或用户的浏览器设置)明确更改了根字体大小,否则 1rem 等于 16px。
vw 和 vh 有什么用途?
vw(视口宽度)和 vh(视口高度)是相对于浏览器窗口当前宽度和高度的百分比——1vw 等于视口宽度的 1%。它们常用于全屏布局以及随屏幕缩放的响应式排版。
一个像素总是恰好等于 1/96 英寸吗?
根据 CSS 规范,是的——一个 CSS 像素被定义为 1/96 英寸,这也是为什么 1pt(1/72 英寸)会精确转换为 96/72 = 1.333 个 CSS 像素。

相关工具

纵横比计算器
带宽计算器
下载时间计算器
云托管成本计算器
CDN 成本计算器
应用程序编程接口 货币化计算器
px
16
rem
1
em
1
pt
12
vw
1.1111
vh
1.7778
%
100