BitLeap
CSS UNIT STUDIO

单位换算，
顺便看尺度。

不只做 px / rem / em / vw 换算，也把 viewport、容器宽度、字体基准、fluid clamp、比例尺和 Tailwind 输出放到同一个工作台。

CONVERSIONS24px base
PX
24px

绝对像素值，常用于边框、图标和固定间距。

REM
1.5rem

基于根字号 root font-size，适合全站字号与间距。

EM
1.5em

基于父级或当前元素字号，适合组件内部相对缩放。

VW
1.6667vw

基于视口宽度，1vw = viewport width / 100。

VH
2.6667vh

基于视口高度，1vh = viewport height / 100。

VMIN
2.6667vmin

基于视口较短边，适合横竖屏自适应。

VMAX
1.6667vmax

基于视口较长边，适合大屏视觉尺度。

%
2%

基于容器宽度，适合局部布局比例。

PT
18pt

排版点数，1pt ≈ 1.333px，常见于设计稿换算。

VISUAL PREVIEW

同一个数值在文字、方块、间距里的视觉参考。

font-size: 24px

BitLeap Typography Preview

SCALE TABLE

常用 spacing / type scale 快速换算。

OUTPUTCSS READY
CSS Variables
:root {
  --root-font-size: 16px;
  --space-current: 24px;
  --space-current-rem: 1.5rem;
  --fluid-current: clamp(1rem, 0.6479rem + 1.5023vw, 2rem);
}
Tailwind Arbitrary
className="text-[1.5rem] p-[24px]"
Scale Table
   8px  =  0.5rem      =  0.5556vw
  16px  =  1rem        =  1.1111vw
  24px  =  1.5rem      =  1.6667vw
  32px  =  2rem        =  2.2222vw
  40px  =  2.5rem      =  2.7778vw
  48px  =  3rem        =  3.3333vw
  56px  =  3.5rem      =  3.8889vw
  64px  =  4rem        =  4.4444vw
  80px  =  5rem        =  5.5556vw
  96px  =  6rem        =  6.6667vw
 120px  =  7.5rem      =  8.3333vw
 160px  =  10rem       =  11.1111vw
Fluid clamp()
Min px16px
Max px32px
Min viewport375px
Max viewport1440px
clamp(1rem, 0.6479rem + 1.5023vw, 2rem)
Report
BitLeap CSS Unit Studio

Input: 24px
Root font-size: 16px
Parent font-size: 16px
Viewport: 1440×900px
Container width: 1200px
Precision: 4

Conversions:
PX: 24px
REM: 1.5rem
EM: 1.5em
VW: 1.6667vw
VH: 2.6667vh
VMIN: 2.6667vmin
VMAX: 1.6667vmax
%: 2%
PT: 18pt

Fluid clamp:
clamp(1rem, 0.6479rem + 1.5023vw, 2rem)

CSS variables:
:root {
  --root-font-size: 16px;
  --space-current: 24px;
  --space-current-rem: 1.5rem;
  --fluid-current: clamp(1rem, 0.6479rem + 1.5023vw, 2rem);
}

Tailwind:
className="text-[1.5rem] p-[24px]"
CONTEXT AWARE

rem、em、vw、vh、vmin、vmax 和百分比都需要上下文，这版把字号、视口和容器宽度全部显式放出来。

FLUID CLAMP

内置 clamp 生成器，可以快速把最小 / 最大字号或间距转换为响应式 CSS。

DESIGN SCALE

4pt、8pt、字体尺度和自定义步进可以直接生成 px / rem / vw 对照表。

BitLeap · 本地计算 · 隐私优先