Skip to main content
CalculoraCalculora

金融与商业

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

数学与技术

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

健康与生活

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

创作者与专项

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

转换器

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

随机生成器

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

PDF 工具

将PDF转换为JPG将PDF转换为PNG从PDF提取文本将 PDF 转换为 GIF将 PDF 转换为 WebP将 PDF 转换为 SVG将PDF转换为Word将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将JPG转换为AVIF将PNG转换为AVIF

GIF 和动画

将GIF帧转换为PNG将GIF帧转换为JPGGIF帧提取器将 PNG 转换为 GIF将 JPG 转换为 GIF将 GIF 转换为 WebP

编辑

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

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

100%隐私 — 所有计算在您的浏览器中完成,不向任何服务器发送数据永远免费 — 无付费墙,无订阅,无需账户

热门

  • BMI计算器
  • 贷款计算器
  • 年龄计算器
  • 抵押贷款计算器
  • 百分比计算器
  • 科学计算器
  • 查看全部 →

分类

  • 数学
  • 金融
  • 健康与生活
  • 金融与商业
  • 开发者工具
  • 工程
  • 分类 →

更多

  • 货币转换器
  • 文件转换器
  • 游戏与趣味工具

法律信息

  • 关于我们
  • 联系我们
  • 隐私政策
  • 服务条款
  • 免责声明
  • 网站地图

语言

enEnglisharالعربيةesEspañoldeDeutschfrFrançaishiहिन्दीidBahasa IndonesiaitItalianoja日本語ko한국어ptPortuguêsruРусскийtrTürkçeviTiếng Việtbnবাংলাzh中文nlNederlandsplPolskiukУкраїнськаmsBahasa Melayuthภาษาไทย

© 2026 Calculora. 版权所有。

使用构建 — 100% 免费

无服务器 — 完全静态网站,零数据收集

  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 规则在屏幕上实际渲染出的效果,都非常有用。

何时使用此计算器

  • 在开始项目之前需要评估工具成本时
  • 将结果与其他类似工具进行比较时
  • 学习如何在不同场景中使用工具时
  • 与团队或客户分享结果时
  • 验证工具计算的准确性时
  • 寻找快速简便的方法解决特定问题时

步骤:

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

公式

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

使用场景

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

主要优势

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

专业提示

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

需要避免的常见错误

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

关键术语解释

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

相关概念

  • [object Object]
  • [object Object]
  • [object Object]
  • [object Object]
  • [object Object]

示例

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

解读您的结果

此工具根据您提供的输入显示详细结果。请仔细查看每个部分,了解如何解释数字并据此做出决策。 如果您对工具的工作方式或如何解释特定结果有疑问,请参阅下面的常见问题解答部分或联系支持。

常见问题

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 像素。
这个工具是免费的吗?
是的,这个工具完全免费,不需要注册。您可以自由使用。
数据安全吗?
是的,所有计算都在您的浏览器中进行。没有数据发送到我们的服务器。
可以在手机上使用吗?
是的,该工具与所有设备兼容,包括智能手机和平板电脑。
如何保存结果?
如果此功能可用,您可以复制结果或导出为PDF或CSV文件。
结果准确吗?
结果基于公认的公式和方程式。为了最大准确性,请验证所有值的输入是否正确。
可以离线使用吗?
是的,大多数计算在浏览器本地进行,不需要互联网连接。
如何解决工具问题?
请使用最新版本的浏览器,并在必要时清除缓存。如果问题持续存在,请联系支持。

相关工具

探索更多工具

宽高比计算器

带宽计算器

下载时间计算器

云托管成本计算器

CDN 成本计算器

API变现计算器

相关工具

宽高比计算器
开发者工具
带宽计算器
开发者工具
下载时间计算器
开发者工具
云托管成本计算器
开发者工具
px
16
rem
1
em
1
pt
12
vw
1.1111
vh
1.7778
%
100