可以在移动设备上使用吗？

Yes, this tool works on any device with a modern browser including phones and tablets.

此工具可以离线使用吗？

Yes, once the page has loaded, the tool works entirely in your browser without needing an internet connection. All processing is done locally with JavaScript.

Is there a character or line limit?

There is no hard limit. The tool can handle files with tens of thousands of lines, though very large inputs may slow down depending on your browser and device.

CSS 单位转换器，免费

在 px、rem、em、vw、vh、pt、cm、mm、in 和 % 之间互相转换，支持自定义上下文。

上下文设置

根字号（px）

父级字号（px）

视口宽度（px）

视口高度（px）

转换

数值

从

结果

CSS 单位参考

绝对单位

px · 像素（1/96 英寸）
pt · 点（1/72 英寸）
cm · 厘米
mm · 毫米
in · 英寸

相对单位

rem · 相对于根字号
em · 相对于父级字号
vw · 视口宽度的 1%
vh · 视口高度的 1%
vmin · 视口较短边的 1%
vmax · 视口较长边的 1%
% · 父级元素的百分比

什么时候用 rem，什么时候用 em？

使用 rem 可以得到一致的尺寸（外边距、内边距、字号）· 它始终参照根元素。当您希望尺寸相对于父级（例如嵌套组件随上下文缩放）时使用 em。

为什么 px 不总等于一个物理像素？

CSS 的 px 是「参考像素」，在正常阅读距离下定义为 1/96 英寸。在高密度屏幕（HiDPI）上，一个 CSS px 可能对应 2 或 3 个物理像素。

CSS参考像素：所有绝对单位的基石

CSS绝对单位（in、cm、mm、Q、pt、pc、px）均锚定于CSS参考像素。W3C CSS Values and Units Module Level 3将其定义为「设备像素密度为96 dpi、距离读者一臂之长的设备上，一个像素的视角」。以约28英寸的臂长计算，该视角约为0.0213°，相当于在典型观看距离下约0.26毫米的物理屏幕宽度；规范还指出，相同视角在12英尺处约等于1.3毫米，这解释了为何投影仪和电视的像素物理尺寸可以更大，但每个CSS像素仍只计为一个。

对于屏幕，规范将CSS 1in = 96 px定义为精确值，而非从实际屏幕英寸推导。这意味着上表中的换算关系是精确的，与显示器DPI无关：12pt始终等于16px，1pc始终等于16px，1mm始终约为3.78px。在高DPI显示器（Retina、4K）上，操作系统将每个CSS像素映射到最接近参考视角的设备像素数，通常是Retina MacBook上每个CSS像素对应2个设备像素，iPhone Pro上对应3个，150%缩放的Windows桌面上对应1.5个。Retina屏幕上一条清晰的1px边框需要2个设备像素。

字体相对单位

这些单位相对于字体排印而非物理英寸来解析，是可访问、可缩放布局的基础。

em是基础单位，历史颇为悠久，比CSS早约500年。在活字印刷时代（古腾堡之后，约1450年），「em quad」（全身铅字）是一块宽度等于铅字字身高度的方形铅块，历史上近似于大写字母M的宽度。CSS沿用了这一概念：1em等于当前元素计算后的字体大小。著名的坑是嵌套的font-size: 1.2em声明会叠加相乘，一个父元素1.2em内的子元素1.2em，渲染后的字号为祖父元素的1.44×。

rem（「根em」）是CSS3新增的，专门解决上述叠加问题。1rem等于根元素<html>的字体大小，不受父级嵌套影响。浏览器默认将根元素设为16 px，除非用户覆盖，因此默认条件下1rem = 16px。rem最早在2010年的Safari 4.1和Firefox 3.6中推出，IE9于2011年3月支持，IE8从未支持，迫使开发者在2014年前后仍需提供px回退方案。

CSS Values 4中较新的字体相对单位包括：ch（当前字体中「0」字符的宽度，适用于限制行宽，如max-width: 60ch或66ch，处于排版理想的45-75字符阅读范围内）、ex（字体x高度）、cap（大写字母高度）、ic（CJK水字形的步进宽度）、lh/rlh（元素/根元素的计算行高，适用于垂直节律）。

视口百分比单位（以及移动端地址栏问题）

经典四大单位，vw、vh、vmin、vmax：分别代表视口宽度的1%、视口高度的1%、两者中较小值的1%和较大值的1%。在1920 × 1080分辨率下：1vw = 19.2px，1vh = 10.8px。

100vh长期以来在移动端令人头疼，因为iOS Safari和Chrome移动版都会显示随滚动而收起的地址栏。浏览器必须做出选择：将100vh定为短视口（地址栏可见，滚动后内容被裁剪），还是高视口（地址栏隐藏，首次绘制时出现大片空白）。iOS Safari选择了高视口行为，让开发者年复一年地排查「为什么我的首屏高度比屏幕还高」。

Interop 2022项目（Apple、Google、Igalia、Microsoft、Mozilla等）于2022年3月新增了视口变体单位以解决此问题：

小视口（svw/svh/svmin/svmax），假设浏览器UI完全展开，即最小可能视口。首次绘制时稳定。
大视口（lvw/lvh/等），假设浏览器UI完全收起，即最大可能视口。
动态视口（dvw/dvh/等），随UI收起和展开实时更新。最匹配实际效果，但在滚动时可能引发重绘。

实用方案：在首屏区域使用min-height: 100svh以防止在iOS上被裁剪，或在全屏模态框上使用height: 100dvh。Safari最先支持（15.4，2022年3月），Firefox 101（2022年5月），Chrome和Edge 108（2022年12月）。目前全球支持已相当普遍。

容器查询单位

一个较新的单位族，cqw、cqh、cqi、cqb、cqmin、cqmax：让元素根据其容器而非视口来调整尺寸。对于组件驱动设计至关重要，同一个组件可能在侧边栏中宽300像素，在主列中宽900像素。该单位会相对于最近的已设置container-type的祖先容器进行计算；若不存在合格容器，规范会回退到该轴上的小视口单位。容器查询（及其单位）于2022年在Chromium 105中发布，2022年9月在Safari 16中发布，2023年2月在Firefox 110中发布，2023年成为Baseline新可用特性。

百分比：为何它不真正是长度单位

百分比本质上不是长度单位，而是一种根据上下文解析的独立值类型：

在width/height上：相对于父元素行内尺寸/块尺寸的百分比。
在font-size上：相对于父元素计算后字体大小的百分比。
在line-height上：相对于元素自身字体大小的百分比。
在margin和padding（四个方向）上：相对于父元素行内尺寸（即宽度）的百分比。这是著名的「纵向margin百分比等同于横向」这一意外现象的根源。
在transform: translate()上：相对于元素自身尺寸的百分比。

由于这种上下文解析机制，%无法在不知道父元素尺寸的情况下直接转换为px，因此上方的换算工具会明确要求输入该值。

实用指南：何时使用哪种单位

在font-size上使用rem。它遵循用户的浏览器默认字体设置，对无障碍访问有实质性帮助，因为视觉障碍用户可以全局缩放，而无需逐个网站调整。
在组件内部比例中使用em：与按钮文字匹配的图标大小、随文字缩放的按钮内边距。
在font-size上避免使用px。浏览器缩放有帮助，但仅限于单个网站；rem还能响应用户的默认字体大小设置。
px适用于边框、清晰的装饰元素和阴影，这些场合物理厚度比缩放更重要。
%用于流式布局，使子元素充满父元素。
vw/vh用于首屏区域、全出血背景和模态框：但在涉及移动屏幕底部的任何元素上，请用svh或dvh代替vh。
vmin用于正方形宽高比的元素（头像、启动画面），使其在两个轴上都能适配。
ch用于正文行宽最大值：max-width: 60ch或66ch处于理想阅读范围内。

使用clamp()实现流体排版

clamp(MIN, PREFERRED, MAX)返回被上下限约束的首选值。经典流体字体模式将基于rem的上下限与基于vw的缩放中间值结合：

h1 { font-size: clamp(1.8rem, 1.2rem + 2.5vw, 3rem); }

中间项随视口线性缩放，而基于rem的上下限防止极端字号并保留用户字体缩放能力。clamp()于2020年7月达到Baseline广泛可用状态（Chrome 79、Firefox 75、Safari 13.1）。Utopia（utopia.fyi）和fluid-type-scale.com等工具接受最小/最大视口宽度、最小/最大字体大小和模块比例（1.2、1.25、1.333、1.5、黄金比例），并生成可直接粘贴的声明。

无障碍访问：WCAG SC 1.4.4 文本调整大小

该标准要求文本可放大至原始大小的200%而不丢失内容或功能。它不规定特定单位，但列举的足够技术包括「使用相对于内容中其他测量值的度量」，相对单位（em、rem、%）使合规更容易；仅使用px的布局可通过浏览器缩放满足要求，但更脆弱。心理测试：当用户放大其默认文字大小时，此元素是否应该缩放？如果是，使用rem。边框、装饰性内边距和纯装饰元素可以保留px。