CSS 单位转换器

在线 CSS 单位转换器,支持 px、rem、em、vw、vh、%、pt 等单位实时互转,可自定义根字号基准,方便响应式布局与移动端适配开发。纯浏览器本地运行,免费、无需安装。

基准设置

单位转换

输入数值后显示转换公式

CSS 单位说明

px (像素)

绝对单位,1px = 1/96 英寸。最常用的单位,但不利于响应式设计。

rem (根 em)

相对于根元素 (html) 的 font-size。推荐用于响应式布局。

em

相对于父元素的 font-size。会层层继承,使用时需谨慎。

vw / vh

视口宽度/高度的 1%。适合全屏布局和响应式字体。

vmin / vmax

视口宽高中较小/较大值的 1%。适合保持元素比例。

% (百分比)

相对于父元素的对应属性。width: 50% 表示父元素宽度的一半。

CSS 单位转换器常见问题

CSS 单位转换器怎么使用?

先填写或调整「根字体大小 (html font-size)」、「父元素字体大小 (em 基准)」、「视口宽度 (px)」、「视口高度 (px)」;修改输入或使用页面控件后查看结果区域。可先用「根字体大小 (html font-size)」中的示例 「16」熟悉输入格式,再替换成自己的数据。

处理模式有哪些选项?

本页提供「px」、「rem」、「em」、「vw」、「vh」、「vmin」、「vmax」、「%」、「pt」等选项。先按实际输入和目标选择对应模式,再执行操作;比较两次结果时,保持其他参数一致,避免把不同模式的结果混在一起。

CSS 单位转换器的结果应怎样理解?

先用最小示例验证,再将结果放回实际开发环境检查。语言版本、运行环境、编码和配置项可能与浏览器中的处理规则不同。

输入内容会保存或发给外部服务吗?

本页的主要处理逻辑在浏览器内执行。页面加载资源、打开外部链接,以及带外部地址的内容预览仍可能产生网络请求;“本地处理”并不表示整个网页完全没有网络活动。

没有结果或操作失败时先检查什么?

先检查「根字体大小 (html font-size)」、「父元素字体大小 (em 基准)」、「视口宽度 (px)」是否完整,以及格式、单位和当前选项是否匹配。修改输入后,查看页面的结果或错误提示;可先用少量数据定位问题。

相关工具

CSS 格式化 · Box Shadow 生成器 · CSS 动画生成器 · Css Animation · 全部开发工具