CalKit

CSS Unit Converter

Convert CSS units.

px
px
px
픽셀 (px) 기준값
16.00px

모든 CSS 단위 변환

px16.00 px
rem1.0000 rem
em1.0000 em
vw0.8333 vw
vh1.4815 vh
%100.0000 %

Overview

Convert between CSS units including px, rem, em, vw, vh, and pt. An essential tool for using appropriate units in responsive web design.

Formula

Conversion formulas (based on 16px root font size): px to rem: rem = px / root font size (default 16). rem to px: px = rem × root font size. px to em: em = px / parent element font size. px to pt: pt = px × 72 / 96 (= px × 0.75). px to vw: vw = px / viewport width × 100. px to vh: vh = px / viewport height × 100.

How to Use

  1. 1Select the source CSS unit and the target unit.
  2. 2Set the base font size (default 16px).
  3. 3Enter the value.
  4. 4The conversion result is displayed automatically.

Tips

  • rem is based on the root (html) element font size, making it ideal for consistent sizing.
  • em is based on the parent element font size, so be careful of unintended size changes when nesting.
  • vw/vh change with viewport size, making them useful for responsive typography.
  • The clamp() function allows fluid sizing within minimum/maximum bounds.
  • For accessibility, rem is recommended over px for font sizes.

FAQ

Q. What is the difference between rem and em?

rem is calculated based on the root (html) element's font size, while em is based on the parent element's font size. rem ensures consistent sizing everywhere, but em can compound as elements are nested.

Q. Is the browser default font size always 16px?

Most browsers default to 16px, but users can change this in browser settings. This is why using rem enables accessible designs that respond to user preferences.

Q. What should I watch out for when using vw/vh units?

On mobile browsers, the viewport size can change when the address bar appears or hides. Use dvh (dynamic viewport height) to address this issue. Also, 100vw includes the scrollbar width, which may cause horizontal scrolling.

Related Calculators