Convert from:
Converted values
px
16px
rem
1rem
em
1em
pt
12pt
%
100%
px → rem reference (base 16px)
| px | rem | em | pt | % |
|---|---|---|---|---|
| 1 | 0.0625 | 0.0625 | 0.75 | 6.25 |
| 2 | 0.125 | 0.125 | 1.5 | 12.5 |
| 4 | 0.25 | 0.25 | 3 | 25 |
| 8 | 0.5 | 0.5 | 6 | 50 |
| 10 | 0.625 | 0.625 | 7.5 | 62.5 |
| 12 | 0.75 | 0.75 | 9 | 75 |
| 14 | 0.875 | 0.875 | 10.5 | 87.5 |
| 16 | 1 | 1 | 12 | 100 |
| 18 | 1.125 | 1.125 | 13.5 | 112.5 |
| 20 | 1.25 | 1.25 | 15 | 125 |
| 24 | 1.5 | 1.5 | 18 | 150 |
| 28 | 1.75 | 1.75 | 21 | 175 |
| 32 | 2 | 2 | 24 | 200 |
| 36 | 2.25 | 2.25 | 27 | 225 |
| 40 | 2.5 | 2.5 | 30 | 250 |
| 48 | 3 | 3 | 36 | 300 |
| 56 | 3.5 | 3.5 | 42 | 350 |
| 64 | 4 | 4 | 48 | 400 |
Category:css
Mode:Offline
Version:1.0.0
Access:Free
CSS 단위 변환기란 무엇입니까?
CSS 단위 변환기는 CSS 가 크기 유형과 레이아웃에 사용하는 단위 사이의 길이를 변환합니다: px,rem, em,pt, %. 현대의 반응형 디자인은 상대적인 단위에 기대기 때문에 존재합니다 - 사용자의 글꼴 크기 설정과 줌으로 rem 과 em 스케일 - 디자인 모형과 오래된 스타일시트는 일반적으로 고정 픽셀로 표현됩니다. 이 도구는 24px 와 같은 값을 가져와 한 번에 1,5rem,1,5em,18pt, 150%로 표시하며 단일 필드에서 모든 방향으로 작동합니다.
변환은 모두 하나의 숫자에 달려 있습니다: 루트 (기본) 글꼴 크기, 이는 html 요소의 브라우저 기본값이기 때문에 기본값은 16px입니다. 하나의 rem은 항상 기본 글꼴 크기와 같으므로 16px에서 값 16px는 1rem, 24px는 1.5rem, 8px는 0.5rem입니다. 포인트는 CSS 참조 픽셀에 묶여 있습니다. 1 인치는 96px 및 72pt입니다. 따라서 1pt는 96/72, 약 1.333px입니다. 퍼센트는 기본 글꼴 크기의 공유로 처리되므로 100%는 기본 글꼴 크기와 같고 50%는 절반과 같습니다.
모든 것이 브라우저에서 실행되므로 업로드, 서버에서 대기, 변환 값의 제한이 없습니다. 기본 글꼴 크기를 변경하여 고유한 글꼴 크기를 설정하는 구성 요소를 모델링하고 모든 단위에서 결과를 읽고 필요한 것을 복사합니다. 내장된 PX-to-REM 테이블은 유형 스케일에서 가장 많이 나오는 크기에 대한 준비된 참조를 제공합니다.
CSS 단위 변환기를 사용하는 방법은 무엇입니까?
1
값을 입력하고 단위를 선택하십시오
변환할 숫자를 입력하고 현재 있는 단위를 선택합니다 - px,rem, em,pt, 또는 %. 24px 와 같이 해당 단위에 값을 붙여넣을 수도 있으며,도구가 단위를 읽어줍니다.
2
기본 글꼴 크기 설정
프로젝트에서 16px 브라우저 기본값이 아닌 다른 것을 사용하는 경우 루트 글꼴 크기를 조정합니다. 이것은 REM, EM 및 %가 픽셀과 어떻게 관련되는지를 제어합니다.
3
모든 단위를 한 번에 읽으십시오
변환기는 지원되는 모든 단위에 해당하는 값을 즉시 표시하며, 각 단위 접미사는 CSS에 바로 떨어뜨릴 수 있습니다.
4
참조 테이블 복사 또는 사용
한 번의 클릭으로 결과를 복사하거나 인쇄술 규모의 공통 크기에 대한 PX-to-REM 참조 테이블을 스캔합니다.
주요 특징
모든 단위를 한 번에
하나의 값을 입력하고 즉시 PX, REM, EM, PT 및 %를 나란히 표시합니다. 각 형식은 해당 단위로 형식이 지정되어 스타일시트에 직접 붙여넣을 수 있습니다.
구성 가능한 기본 글꼴 크기
루트 글꼴 크기는 조정 가능하므로 16px 기본값, 10px "62.5%" 트릭 또는 구성 요소 수준 글꼴 크기를 사용하는지 여부에 관계없이 rem, em 및 % 변환이 프로젝트와 일치합니다.
양방향, 어떤 방향으로든
고정된 "from"과 "to"가 없습니다. px 를 rem 으로,rem 을 px 로,px 를 em 으로,또는 pt 를 px 로 - 어떤 단위에서 어떤 단위로 - 단일 입력으로부터 변환합니다.
PX-TO-REM 참조 테이블
내장 테이블에는 유형 스케일에서 가장 많이 나타나는 픽셀 크기에 대한 REM, EM, PT 및 % 등가물이 나열되어 있으므로 선택한 기반에서 전체 규모를 확인할 수 있습니다.
Frequently Asked Questions
픽셀 값을 루트 글꼴 크기로 나눕니다. 브라우저 기본값은 16px, REM = px ÷ 16이므로 16px는 1rem, 24px는 1.5rem, 8px는 0.5rem입니다. 변환기에 픽셀 값을 입력하면 설정한 기본 글꼴 크기에 해당하는 REM이 즉시 나타납니다.
Related Tools
CBS
css
CSS Box Shadow Generator
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset - then copy production-ready CSS.
CCG
css
CSS Clamp Generator
Generate fluid, responsive CSS clamp() values that scale between viewports
CSS
css
CSS Gradient Generator
Create beautiful CSS gradients with live preview
CTS
css
CSS Text Shadow Generator
Design layered CSS text-shadows with a live preview and sliders for offset, blur, color, and opacity - build glow, outline, retro 3D, and emboss effects, then copy production-ready CSS.
Comments
0 comments
No comments yet. Be the first to share your thoughts!
px to rem converterrem to px converterpx to em convertercss unit converterpx to pt converterrem calculatorem to pxcss font size converterpixel to remresponsive font size converter