디자이너가 처음으로 "body text 16px, 제목 28px, 작은 인쇄 13px"라고 말한 사양을 나에게 건네주었을 때 프런트 엔드 리드는 "but we ship everything in rem, " 계산기 앱에서 손으로 나눗셈을 했습니다. 16분의 1은 16분의 1, 28분의 16은 1점 75, 13분의 16은 0점 8, 125입니다. 그런 다음 기본 글꼴 크기가 "62.5%" 다른 프로젝트에 대한 설정으로 변경되었으며 다시 모든 작업을 수행했습니다. 세 번째 이후에는 Toolz.dev 워크플로에 작은 변환기를 만들었고 그 이후로 거의 모든 구성 요소의 산술 실수로부터 조용히 구해 주었습니다.
TL;DR: CSS 단위 변환기는 한 단위 - px,rem, em,pt, 또는 % - 의 값을 다른 모든 단위의 동등한 값으로 바꾸는데,이는 사용자가 제어하는 루트 글꼴 크기 (기본값으로 16px) 에 따라 px 를 rem 으로 변환하려면 픽셀을 루트 글꼴 크기로 나눕니다:
24px ÷ 16 = 1.5rem. 반대 방향으로 가려면 다음을 곱합니다:1.5rem × 16 = 24px. 그만큼 CSS 단위 변환기 한 번에 모든 장치에 대해 즉시 이 작업을 수행하고 브라우저에서 완전히 실행되며 복사할 수 있는 px-to-rem 참조 테이블이 포함되어 있습니다.
이 가이드는 단위가 어떻게 관련되어 있는지,기본 글꼴 크기가 왜 그렇게 중요한지,각 단위에 도달해야하는시기,변환기가 실행하는 정확한 수학을 다룹니다. WordPress 테마,WP Adminify admin UI 및 React 대시 보드에 걸쳐 많은 인터페이스를 스타일링했으며 단위 질문은 모두 매달려있는 단일 숫자를 보면 규칙이 간단합니다.
px에서 rem으로의 변환이 중요한 이유는 무엇입니까?
픽셀은 거의 모든 디자인 도구가 내보내는 단위입니다. Figma,Sketch, Photoshop 은 모두 픽셀 단위로 생각하므로 핸드오프 사양은 픽셀 값의 목록입니다. 또한 하나의 CSS 픽셀은 사용자가 아무것도 조정할 때 변경되지 않는 고정 참조 크기이기 때문에 픽셀을 쉽게 추론할 수 있습니다.
그 고정성은 접근 가능한,반응하는 공용영역을 위해 정확하게 문제 이다. 누군가가 그들의 browser's 과태 글꼴 크기를 증가할 때 - 낮은 시각을 가진 많은 사람들이 의지하는 조정 - 고정 화소에 치수가 재진 원본은 변화를 완전하게 무시한다. rem 가늠자에 치수가 재진 원본은 그것으로 몇몇 오래된 윤곽 및 사용자 스타일시트에 브라우저 급상승의 동일이 진실하다. 당신이 당신의 타이포그래피를 reader's 특혜를 존중하기 위하여 원하는 경우에,당신은 관계되는 단위에서 치수를 재,rem 은 전체적인 페이지에 예상할 수 있 행동한 것 이다.
그래서 일반적인 워크플로는: 픽셀로 디자인하고,rem 으로 배송합니다. 그러면 하루 종일 나눗셈을 하게 되고,나눗셈은 작은 오류가 들어오는 곳입니다. 쓰기 0.8125rem 대신 0.875rem 13px 값을 들어 오타가 생산 배송하고 하나의 라벨이 미묘하게 잘못 보이게하는 종류입니다. 변환기는 내가 도달 하나를 유지하는 전체 이유입니다 그 위험을 제거합니다. 이러한 많은 작업을 통해 작업하는 경우,더 넓은 웹 개발자 툴킷 단위 변환이 다른 일상 업무와 함께 적합한 위치를 다룹니다.
px,rem, em,pt, %의 차이는 무엇인가요?
이러한 모든 장치는 렌더링 시 관계인 여러 CSS 픽셀로 해결됩니다 CSS 값 및 단위 레벨 4 핀 아래로: 참조 픽셀은 화면이 아닌 96dpi 디스플레이에 대해 정의됩니다. 차이점은 측정 대상입니다.
px 는 CSS 참조 픽셀이다. 어떤 글꼴 크기에 의존하지 않는다는 점에서 절대 단위이다. 1px 이다 1px. 이것은 예측 가능하지만 사용자 선호도에 반응하지 않게 만듭니다.
렘 means "root em." 한 rem 은 루트 요소의 글꼴 크기와 같습니다 - the html 요소. 기본적으로 16px 입니다,그래서 1rem 이다 16px, 1.5rem 이다 24px, 그리고 0.5rem 이다 8px. 항상 루트에 묶여 있기 때문에 rem 값은 요소가 아무리 깊이 중첩되어 있더라도 문서의 모든 곳에서 동일한 것을 의미합니다.
엠 의 글꼴 크기에 상대적입니다 현재 element.element's 글꼴 크기가 20px 이면 1em 그 안에는 20px, 1.5em 는 30px,등등입니다. 캐치는 em compounds 입니다: 부모가 설정하면 font-size: 1.2em 그리고 아이도 설정한다 1.2em, the child's effective size is 1.2 × 1.2 of the grandparent. 이 도구는 베이스에서 크기가 지정된 요소를 가정하므로 em 과 rem 은 동일하게 읽습니다 - 그리고 여러분은 베이스 글꼴 크기를 그 element's 크기로 설정하여 특정 em 컨텍스트를 모델링합니다.
pt 는 인쇄 타이포그래피에서 계승된 포인트입니다. CSS 는 1 인치를 96 픽셀과 72 포인트로 정의합니다 1pt 96/72 ≈ 1.333px와 같습니다 1px 0.75pt와 같습니다. 포인트는 인쇄 스타일시트에 속합니다; 화면에서 참조 픽셀의 고정된 배수일 뿐입니다.
% 글꼴 크기는 상위(또는 루트에서 기본)의 백분율입니다. 100% 참조 크기와 같습니다 50% 절반과 같습니다. 16px 베이스에서, 100% 는 16px 이고 150% 는 24px.
기본 16px 루트에서 공통 값이 정렬되는 방법은 다음과 같습니다:
| px | 렘 | 엠 | pt | % |
|---|---|---|---|---|
| 12 | 0.75 | 0.75 | 9 X 1000 X 1000 X 1000 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 | 75 |
| 14 | 0.875 | 0.875 | 10.5 | 87.5 |
| 16 | 1 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 1 | 1 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 1 | 12 | 100 |
| 18 | 1.125 | 1.125 | 13.5 | 112.5 |
| 24 | 1.5 | 1.5 | 18 | 150 |
| 32 | 2 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X | 2 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X | 24 | 200 |
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 10 CSS 단위 변환기 설정한 모든 베이스에 대해 이 전체 테이블을 생성하므로 전체 유형 눈금을 한 번에 볼 수 있습니다.
기본 글꼴 크기는 어떻게 모든 것을 변경합니까?
기본 (루트) 글꼴 크기는 모든 상대 단위의 피벗입니다. px 와 pt 는 그대로 유지되는 동안 변경하고 모든 rem,em 및 % 변환은 변경합니다.
브라우저 기본값은 16px 이며,이것이 그 이유입니다 1rem 는 정상적으로 16px니다. 하지만 루트는 아무것도로 설정할 수 있습니다. 인기있는 패턴 세트 html { font-size: 62.5%; }는 루트 10px (16 의 62.5%) 를 만드는 것입니다. 이제 1rem 는 깨끗한 10px그리고 rem math 는 " 소수점 이동": 1.6rem 은 16px,2.4rem 은 24px,0.8rem 은 8px 가 됩니다. 팀은 이를 채택하여 스타일시트의 숫자가 사용자 환경설정에 따라 스케일링하면서도 거의 픽셀처럼 읽혀집니다.
변환기에서 이를 모델링하려면 기본 글꼴 크기를 10 으로 설정하고 rem 열을 읽습니다. 이제 24px 값이 1,5rem 대신 2,4rem 으로 표시됩니다. 이는 자체 글꼴 크기를 설정하는 구성 요소에서 em 에 대해 추론하는 방법이기도 합니다: 카드가 설정되면 font-size: 20px그러면 그 안에 있는 em 값은 20을 기준으로 하므로 베이스를 20으로 설정하여 무엇을 볼 수 있습니다 1.5em 해결합니다.
제가 가장 자주 보는 실수는 어떤 베이스에 대해 값이 계산되었는지 잊어버리는 것입니다. 누군가 16px 루트를 가정하여 24px 를 1,5rem 으로 변환한 다음 루트가 10px 인 62,5% 트릭을 실행하는 프로젝트에 드롭합니다. - 그리고 1,5rem 에는 24px 가 아닌 15px 가 있습니다. 단위는 상대적이므로 숫자는 베이스를 알고 나면 의미만 갖습니다. 프로젝트 간에 rem 값을 붙여넣을 때마다 루트 글꼴 크기를 먼저 확인합니다.
어떻게 손으로 px 를 rem 으로,rem 을 px 로 변환합니까?
수학은 하나의 나눗셈과 하나의 곱셈입니다.
px에서 rem으로: 픽셀 값을 루트 글꼴 크기로 나눕니다.
rem = px ÷ base
24px ÷ 16 = 1.5rem
13px ÷ 16 = 0.8125rem
10px ÷ 16 = 0.625rem
rem에서 px로: rem 값에 루트 글꼴 크기를 곱합니다.
px = rem × base
1.5rem × 16 = 24px
0.875rem × 16 = 14px
2rem × 16 = 32px
px 에 em 요소가 기본 글꼴 크기에 있을 때 rem과 동일한 공식을 사용합니다 24px ÷ 16 = 1.5em. 그 차이는 산술이 아니라 개념적입니다: em 은 현재 요소에 대해 측정되므로 해당 요소's 크기가 루트와 다르면 그 크기를 밑으로 사용합니다.
px에서 pt로: 0.75를 곱하면 됩니다 1px = 0.75pt. 그래서 16px × 0.75 = 12pt. 반대 방향으로 가고, pt × 1.333 = px.
px ~ %: 밑변으로 나누고 100 을 곱합니다. 그래서 24px ÷ 16 × 100 = 150%.
이 중 어느 것도 어렵지 않지만 구성 요소를 스타일링하는 동안 40번을 수행하면 피로가 오타를 발생시킵니다. 이것이 바로 반복적이고 오류가 발생하기 쉬운 작업입니다 개발자 생산성 도구 철학은 자동화를 말합니다. 산술을 오프로드하여 디자인에 주의를 기울이십시오.
각 유닛은 언제 사용해야 하나요?
올바른 단일 단위는 없습니다; 각 작업마다 올바른 단위가 있습니다.
글꼴 크기는 rem을 사용하세요. 이것은 목록에서 가장 강력한 추천입니다. Rem 은 user's 브라우저 글꼴 크기 환경 설정으로 확장되며 이는 실제 접근성 승리이며 루트에 고정되어 있기 때문에 예기치 않게 복합되지 않습니다. 대부분의 팀은 rem 에서 모든 유형의 크기를 조정합니다.
시스템에 따라 간격을 위해 rem 또는 px를 사용하십시오. 많은 디자인 체계는 여백 및 패딩을 rem 에 표현합니다 그래야 간격이 유형을 가진 가늠자. 다른 사람은 px 에 있는 간격을 pixel 완벽한 배치를 위해 지킵니다. 둘 다 방어할 수 있습니다; 1 개를 선택하고 일관된.
자체 요소로 확장해야 하는 항목에 em을 사용하세요. 버튼과 함께 성장해야하는 버튼에 패딩's 글꼴 크기는 고전적인 em 사용 - em 에서 패딩을 설정하고 자동으로 텍스트를 추적합니다. 인접한 텍스트에 상대적인 아이콘 크기 조정은 또 다른 것입니다.
테두리와 세부 사항에는 px를 사용하세요. A 1px 국경은 일반적으로 유지되어야 합니다 1px; 글꼴 크기에 따라 헤어라인을 확장하는 것을 거의 원하지 않습니다. 미디어 쿼리 중단점도 종종 px로 작성되지만 일부는 줌 동작을 위해 px를 선호합니다.
인쇄 스타일시트에서만 pt 사용. 당신이 뭔가를 스타일링하고 있다면 @media print, 점은 인쇄의 고유 단위이고 사용할 가치가 있습니다. 화면에서 px 또는 rem을 선호합니다.
유체 너비와 때때로 글꼴 크기에 %를 사용하십시오. 백분율은 레이아웃의 모든 곳에 있습니다(Pertage is everywhere in layout)width: 50%), 글꼴 크기로는 62.5% 트릭의 루트에서 사용되는 경우도 있습니다.
CSS 유닛의 일반적인 실수는 무엇입니까?
첫 번째는 이미 설명한 base-mismatch 문제입니다: 잘못된 루트 글꼴 크기에 대해 변환. rem 번호를 신뢰하기 전에 항상 루트를 알고.
두 번째는 지나치게 정확한 rem 값입니다. 일부 변환은 균등하게 나누지 않습니다 - 16px 베이스의 15px 는 0.9375rem 이고,13px 는 0.8125rem 입니다. 그 긴 소수는 정확하지만 추악하며,너무 세게 반올림하면 (0.94rem 으로 말함) 렌더링된 크기가 픽셀의 일부만큼 이동합니다. 내 규칙: rem 에 대해 소수점 세 개 또는 네 개를 유지하거나 깔끔하게 나누는 기본 및 크기 값을 선택하십시오. 변환기는 현명하게 반올림하고 후행 0 을 그렇게 다듬습니다 24px 로 읽는다 1.5rem 보다는 1.5000rem.
세 번째는 compounding em 입니다. 각각 em 글꼴 크기를 설정하는 중첩 요소는 효과를 배가하므로 깊이 중첩 된 항목은 의도 한 것보다 훨씬 크거나 작아 질 수 있습니다. em 이 놀랍다고 생각하면 그 compounding 은 거의 항상 이유입니다 - 그것들을 rem 으로 전환하면 놀라움이 사라집니다.
네 번째는 pt 와 px 가 상호 교환 가능하다고 가정하는 것입니다. 그들은;가 아닙니다 12pt 이다 16px, 아니다 12px. 화면과 인쇄에 걸쳐 있는 스타일시트에 섞는 것은 미묘한 버그입니다.
Toolz.dev 변환기는 수학을 어떻게 처리합니까?
후드 아래에서 변환기는 하나의 아이디어를 사용합니다: 모든 단위를 픽셀 수로 표현한 다음 픽셀을 통해 변환합니다. 각 단위에는 고정된 "pixels per unit" 기본 글꼴 크기가 주어지면 px 는 1,rem 및 em 은 기본,pt 는 96/72,%는 base/100 입니다. 변환하려면 입력에 unit's pixels-per-unit 을 곱하여 픽셀 값을 얻은 다음 대상 unit's pixels-per-unit 으로 나눕니다. 그 단일 패스는 모든 단위를 한 번에 제공하므로 입력할 때 px,rem, em,pt 및 % 업데이트가 함께 표시됩니다.
또한 단위가 첨부된 값을 구문 분석하므로 붙여넣습니다 24px 숫자와 단위 모두를 채워줍니다. 결과는 소수점 이하 몇 자리로 반올림되고 가독성을 위해 뒤에 오는 0 을 제거하며,각각은 CSS 에 붙여 넣을 준비가 된 단위 접미사가있는 값을 복사하는 원 클릭 복사 버튼을 사용합니다. 모든 것이 클라이언트 측에서 실행됩니다 - 입력 한 내용이 업로드되지 않습니다 - 와 일치합니다 프라이버시 우선 접근법 사이트의 모든 도구 뒤에.
동일한 구성 요소에 대해 색상을 선택하거나 그림자를 만드는 경우에도 마찬가지입니다 CSS 그라디언트 생성기 그리고 박스 섀도우 생성기 한 번의 클릭으로 더 넓은 범위를 누리세요 단위 변환기 작업이 CSS 외부에서 벗어날 때 길이 및 무게와 같은 물리적 단위를 처리합니다.
자주 묻는 질문
PX를 REM으로 어떻게 변환합니까?
픽셀 값을 루트 글꼴 크기로 나눕니다. 브라우저 기본값은 16px, REM = px ÷ 16이므로 16px는 1rem, 24px는 1.5rem, 8px는 0.5rem입니다. 변환기에 픽셀 값을 입력하면 설정한 기본 글꼴 크기에 해당하는 REM이 즉시 나타납니다.
REM을 PX로 어떻게 변환합니까?
REM 값에 루트 글꼴 크기를 곱합니다. 16px 기본에서 px = REM × 16이므로 1REM은 16px, 1.5REM은 24px, 0.75REM은 12px입니다. HTML 요소가 다른 값을 사용하는 경우 도구에서 기본 글꼴 크기를 변경합니다.
기본 루트 글꼴 크기는 무엇입니까?
브라우저는 기본적으로 html 요소를 16px 로 설정하며,이것이 이 변환기가 16 에서 시작하는 이유입니다. 1rem 은 항상 루트 글꼴 크기와 같기 때문에,그 기본값은 16px 를 정확히 1rem 과 동일하게 만듭니다. 사용자는 브라우저's 기본 텍스트 크기를 변경할 수 있으며,이는 rem 이 접근 가능하고 확장 가능한 타이포그래피에 선호되는 한 가지 이유입니다.
REM과 EM의 차이점은 무엇입니까?
rem 은 항상 root html 글꼴 크기를 기준으로 하므로 전체 페이지에서 일관성을 유지합니다. em 은 현재 요소의 글꼴 크기를 기준으로 하므로 중첩된 요소가 각각 고유한 크기를 설정할 때 컴파운드할 수 있습니다. 도구에서 기본 글꼴 크기를 설정하여 특정 em 컨텍스트를 모델링합니다.
PX와 PT는 CSS에서 어떻게 관련이 있습니까?
CSS 는 1 인치를 96 픽셀과 72 포인트로 정의하므로 1pt 는 96/72 ≈ 1,333px,1px 는 0,75pt 와 같습니다. 포인트는 인쇄 타이포그래피에서 나옵니다; 화면에서 그들은 CSS 참조 픽셀의 고정 배수입니다. 화면 작업을 위해 px 또는 rem 을 사용하고 인쇄 스타일시트를 위해 pt 를 예약하십시오.
62.5% 글꼴 크기 트릭은 무엇을 합니까?
html 글꼴 크기를 62,5%로 설정하면 루트 글꼴 크기가 10px 가 되므로 1rem 은 편리한 10px 가되고 rem 수학은 소수를 이동하는 것으로 바뀝니다 - 1,6rem 은 16px,2,4rem 은 24px 입니다. 변환기에서 이를 모델링하려면 기본 글꼴 크기를 10 으로 설정하고 rem 열을 읽으십시오.
글꼴 크기에 PX 또는 REM을 사용해야 합니까?
Rem 은 일반적으로 글꼴 크기에 선호되는데,이는 user's 브라우저 글꼴 크기 선호도에 따라 확장되므로 접근성이 향상되지만 고정 px 는 그렇지 않습니다. 많은 팀이 px 로 디자인하고 최종 CSS 를 위해 rem 으로 변환합니다. 테두리와 같은 레이아웃 세부 사항은 종종 px 에 유지됩니다.
변환된 값이 때때로 긴 소수를 갖는 이유는 무엇입니까?
일부 변환은 정확하지 않습니다 - 16px 베이스의 15px 는 0.9375rem 이며,pt 값은 종종 반복되는 소수를 생성합니다. 도구는 소수점 이하 몇 자리로 반올림하고 가독성을 위해 후행 0 을 다듬습니다. 픽셀 완벽한 레이아웃의 경우 rem 값을 소수점 이하 두세 자리로 반올림하거나 크기를 깔끔하게 나누는 베이스를 선택합니다.
