훌륭한 역사적 맥락을 제공 한 josh3736의 답변 을 칭찬하고 싶습니다 . 잘 설명되어 있지만 CSS 질문은이 질문을받은 후 거의 5 년 동안 바뀌 었습니다. 이 질문에 질문을 받았다 때, px 없었다 정답,하지만 더 이상 오늘 마찬가지입니다.
tl; dr : 사용rem
유닛 개요
역사적으로 px단위는 일반적으로 하나의 장치 픽셀을 나타냅니다. 픽셀 밀도가 높고 높은 기기의 경우 Apple의 Retina 디스플레이와 같은 많은 기기에서 더 이상 유효하지 않습니다.
rem단위는 대표 연구 OOT의 EM의 크기를. 그것은의 font-size어떤 일치 :root. HTML의 경우 <html>요소입니다. SVG의 경우 <svg>요소입니다. font-size모든 브라우저 * 의 기본값 은 16px입니다.
작성 당시에는 rem약 98 %의 사용자가 지원합니다 . 다른 2 %가 걱정된다면 약 98 %의 사용자 가 미디어 쿼리 를 지원 한다는 사실을 상기시켜 드리겠습니다 .
사용 중 px
인터넷에서 CSS 예제의 대부분은 px사실상의 표준이기 때문에 값을 사용 합니다. pt, in및 기타 단위의 다양한 수 의 이론에서 사용되었다,하지만 그들은에 대한 이유에 열심히 신속 유형 이상이었다 분수에 의지해야하는 것으로 잘 작은 값을 처리하고,하지 않았다.
당신은 얇은 테두리를 원한다면 px당신이 사용할 수 1px와 함께, pt당신이 사용해야 할 것 0.75pt일관성있는 결과를, 그리고는 매우 편리 아니다.
사용 중 rem
rem의 기본값 16px은 사용에 대한 강력한 논거가 아닙니다. 쓰기는 0.0625rem이다 더 쓰는 것보다 0.75pt, 왜 누구든지 사용이 것 rem?
rem다른 유닛보다 두 가지 장점이 있습니다.
- 사용자 기본 설정이 존중됩니다
- 원하는
px값 rem으로 원하는 값을 변경할 수 있습니다
사용자 기본 설정 존중
브라우저 확대 / 축소는 몇 년 동안 많은 변화를 겪었습니다. 역사적으로 많은 브라우저가 확장되었을 뿐이지 만 font-size, 웹 사이트에서 누군가가 확대하거나 축소 할 때마다 완벽한 픽셀 완벽한 디자인이 깨지는 것을 깨달았습니다. 이 시점에서 브라우저는 전체 페이지의 크기를 조정하므로 글꼴 기반 확대 / 축소가 그림에서 벗어납니다.
사용자의 희망을 존중하는 것은 그림에서 벗어난 것이 아닙니다. 브라우저가 16px기본적으로 설정되어 있다고 해서 사용자가 기본 설정을 변경 24px하거나 32px시력이 약하거나 가시성이 떨어지는 경우 (예 : 화면 눈부심)를 수정할 수는 없습니다 . 단위를 기준으로 설정하면 rem글꼴 크기가 더 높은 사용자는 비례 적으로 더 큰 사이트를 보게됩니다. 테두리가 커지고 패딩이 커지고 여백이 커지며 모든 것이 유동적으로 확장됩니다.
미디어 쿼리를 기반으로하는 경우 rem사용자가 보는 사이트가 자신의 화면에 맞는지 확인할 수도 있습니다. 이있는 사용자 font-size로 설정 32pxA의 640px다양한 브라우저, 효과적으로에서 사용자에게 표시로 사이트를 볼 수있을 것이다 16pxA의 320px다양한 브라우저. 를 사용할 때 RWD에 대한 손실은 절대 없습니다 rem.
겉보기 px값 변경
때문에 rem온 기반 font-size의 :root노드 당신이 무엇을 변경하려는 경우, 1rem대표, 당신이해야 할 변경입니다 font-size:
:root {
font-size: 100px;
}
body {
font-size: 1rem;
}
<p>Don't ever actually do this, please</p>
무엇을하든 :root요소 font-size를 px값으로 설정하지 마십시오 .
당신이 설정 한 경우 font-size에 htmlA와 px가치, 당신은 그들을 다시 얻을 수있는 방법없이 사용자의 기본 설정을 날아했습니다.
의 겉보기 값 을 변경 rem하려면 %단위를 사용하십시오 .
이에 대한 수학은 상당히 간단합니다.
명백한 font-size는 :root입니다 16px. 그러나로 바꾸고 싶다고하겠습니다 20px. 우리가해야 할 일은 16얻을 값을 곱하는 것입니다 20.
방정식을 설정하십시오.
16 * X = 20
그리고 해결하십시오 X:
X = 20 / 16
X = 1.25
X = 125%
:root {
font-size: 125%;
}
<p>If you're using the default font-size, I'm 20px tall.</p>
배수로 모든 것을하는 것이 20그다지 좋지는 않지만 일반적인 제안은 겉보기 크기를 rem같게 만드는 것 10px입니다. 그 마법의 숫자 10/16는 0.625또는 62.5%입니다.
:root {
font-size: 62.5%;
}
<p>If you're using the default font-size, I'm 10px tall.</p>
문제는 이제 기본이다 font-size페이지의 나머지가 너무 작 설정 방법입니다,하지만에 대한 간단한 수정이있다 : 집합 font-size에 body사용 rem:
:root {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
<p>I'm the default font-size</p>
이 자리에서이 조정의 명백한 값, 유의해야 remIS 10px당신이 작성했을 수있는 값 의미 px로 직접 변환 할 수있는 rem소수의 장소를 부딪쳐서을.
padding: 20px;
로 변하다
padding: 2rem;
당신이 선택하는 명백한 글꼴 크기는 당신에게 달려 있습니다.
:root {
font-size: 6.25%;
}
body {
font-size: 16rem;
}
그리고 1rem동일하다 1px.
따라서 CSS를 지나치게 복잡하게 만들지 않고 사용자의 요구를 존중하는 간단한 솔루션이 있습니다.
잠깐, 캐치가 뭐야?
나는 당신이 그 질문을 할까봐 두려웠습니다. 내가 rem마법 인 척하고 모든 것을 해결하고 싶은 한, 여전히 주목할만한 문제가 있습니다. 아무것도 거래는 갱신 제 생각에 ,하지만 난 당신이 내가 경고하지 않았다고 말할 수 있도록 그들을 호출 할거야.
미디어 쿼리 ( em)
가장 먼저 겪게 될 문제 중 하나 rem는 미디어 쿼리 와 관련이 있습니다. 다음 코드를 고려하십시오.
:root {
font-size: 1000px;
}
@media (min-width: 1rem) {
:root {
font-size: 1px;
}
}
여기서 rem미디어 쿼리가 적용되는지 여부에 따라 변경 되는 값이 미디어 쿼리는의 값에 따라 달라 지므로 rem지구상에서 무슨 일이 일어나고 있습니까?
rem미디어 쿼리에서의 초기 값을 사용 font-size하고 안 계정에에 일어날 수있는 변화 걸릴 (사파리 섹션 참조) font-size의 :root요소를. 즉, 명백한 가치는 항상 16px 입니다.
이것은 약간의 계산 이 필요하다는 것을 의미하기 때문에 약간 성가 시지만 대부분의 일반적인 미디어 쿼리는 이미 16의 배수 값을 사용한다는 것을 알았습니다.
| px | rem |
+------+-----+
| 320 | 20 |
| 480 | 30 |
| 768 | 48 |
| 1024 | 64 |
| 1200 | 75 |
| 1600 | 100 |
또한 CSS 전처리기를 사용하는 경우 믹스 인 또는 변수를 사용하여 미디어 쿼리를 관리하면 문제가 완전히 숨겨집니다.
원정 여행
불행히도 Safari에는 :root글꼴 크기를 변경하면 실제로 rem미디어 쿼리 범위 의 계산 된 값이 변경 되는 알려진 버그가 있습니다 . :root미디어 쿼리 내 에서 요소 의 글꼴 크기 가 변경 되면 매우 이상한 동작이 발생할 수 있습니다 . 다행스럽게도 수정은 간단 합니다 . 미디어 쿼리에 단위 사용em .
상황 전환
다양한 다른 프로젝트 사이에서 프로젝트를 전환하면 글꼴 크기 rem가 다른 값을 가질 수 있습니다. 한 프로젝트 10px에서 다른 프로젝트에서 겉보기 크기가 될 수있는 겉보기 크기를 사용하고있을 수 있습니다 1px. 혼란스럽고 문제가 발생할 수 있습니다.
내 유일한 권장 사항 은 내 경험에서 더 일반적이기 때문에 겉보기 크기 62.5%로 변환 rem하는 10px것입니다.
공유 CSS 라이브러리
임베디드 위젯과 같이 제어하지 않는 사이트에서 사용될 CSS를 작성하는 경우, 겉보기 크기 rem가 무엇인지 알 수있는 좋은 방법이 없습니다 . 이 경우을 계속 사용하십시오 px.
그래도 계속 사용 rem하려면 스타일 시트의 Sass 또는 LESS 버전을 변수로 릴리스하여 겉보기 크기의 배율을 재정의하는 것을 고려하십시오 rem.
* 나는 다른 사람을 사용하지 못하게하고 싶지만 모든 브라우저 가 기본적으로 사용 rem되는지 공식적으로 확인할 수는 없었습니다 . 당신은 알다시피, 많은 브라우저가 있고 하나의 브라우저가 조금씩, 또는 말로 확산되기가 어렵지 않을 것 입니다. 그러나 테스트에서 기본 설정을 사용하는 시스템에서 기본 설정을 사용하는 브라우저가 이외의 값을 갖는 단일 예를 보지 못했습니다 . 그러한 예를 찾으면 나와 공유하십시오.16px15px18px16px
