CSS Unit Converter

CSS 单位转换

在线 CSS 单位转换工具，支持 px、rem、em、vw、vh、% 等单位互转

转换模式：

输入数值：

单位：

常用数值：

转换结果：

12pt

1/72英寸，印刷单位

1pc

12点，1/6英寸

0.1667in

物理英寸单位

0.4233cm

物理厘米单位

4.2333mm

物理毫米单位

使用说明

绝对单位：

px (像素)：屏幕上的物理像素点，最常用的单位
pt (点)：1/72英寸，主要用于印刷
pc (派卡)：12点，等于1/6英寸
in (英寸)：物理英寸单位
cm (厘米)：物理厘米单位
mm (毫米)：物理毫米单位

相对单位：

rem：相对于HTML根元素字体大小，推荐用于响应式设计
em：相对于父元素字体大小，可能产生累积效应
vw：视口宽度的1%，适合全屏布局
vh：视口高度的1%，适合全屏布局
vmin：vw和vh中的较小值
vmax：vw和vh中的较大值
%：相对于父元素的百分比

换算关系：

1in = 96px (在96dpi下)
1in = 72pt
1in = 6pc
1in = 2.54cm
1pt = 1.333px
1pc = 12pt = 16px

CSS Unit Converter

Online CSS unit conversion tool

Runs locally · Nothing uploaded

Overview

A practical CSS unit converter supporting conversions between px, rem, em, vw, vh, and percentages. Customize the root font size, batch convert multiple values — an essential tool for responsive frontend development.

Features

px to rem conversion
px to em conversion
px to vw/vh conversion
rem to px conversion
Percentage unit conversion
Batch conversion of multiple values
Custom root font size

How It Works

1 Enter the value to convert in the input field
2 Select the source unit (px, rem, em, vw, etc.)
3 Select the target unit
4 Set the root font size if converting between px and rem
5 Review the conversion result and copy for use

Tips

Batch converting design px values to rem significantly boosts development efficiency
For mobile adaptation, use vw units for proportional scaling
When using rem, ensure the root font size matches your design specifications

Related tools

Tags CSSUnitConvert

FAQ

What is the difference between rem and em?

rem is relative to the root element (html) font size, while em is relative to the parent element font size. rem is more predictable; em is useful for component-level scaling.

Why do I need to convert CSS units?

Responsive design requires adapting layouts across screen sizes. Using relative units like rem/vw ensures better cross-device compatibility.

What root font size should I use?

The browser default is 16px, which most frameworks also use as the baseline. Adjust to match your design spec but keep it consistent.