CSS에서 px 또는 rem 값 단위를 사용해야합니까? [닫은]

새 웹 사이트를 디자인하고 있으며 가능한 한 많은 브라우저 및 브라우저 설정과 호환되기를 바랍니다. 글꼴 및 요소의 크기에 어떤 측정 단위를 사용해야하는지 결정하려고하는데 결정적인 답을 찾을 수 없습니다.

내 질문은 : px또는 remCSS를 사용해야 합니까?

  • 지금까지 사용 px은 브라우저에서 기본 글꼴 크기를 조정하는 사용자와 호환되지 않는다는 것을 알고 있습니다.
  • 나는 캐스케이드 할 em때와 비교하여 유지 관리하기가 더 번거롭기 때문에 무시했습니다 rem.
  • 일부는 rems가 해상도 독립적이므로 더 바람직 하다고 말합니다 . 그러나 다른 사람들은 대부분의 최신 브라우저는 모든 요소를 ​​동일하게 확대 / 축소하므로 사용 px은 문제가되지 않는다고 말합니다 .

CSS에서 가장 바람직한 거리 측정 방법에 대해 다른 의견이 많기 때문에이 질문을하고 있으며 어느 것이 가장 좋은지 잘 모르겠습니다.

답변

TL; DR : 사용 px.

사실

  • 먼저, 사양 에 따라 CSS px단위 는 하나의 물리적 디스플레이 픽셀과 같지 않다는 것을 아는 것이 매우 중요합니다 . 이있다 항상 진실 된 – 심지어 1996 년에 CSS 1 사양 .

    CSS는 96 dpi 디스플레이에서 픽셀의 크기를 측정 하는 참조 픽셀을 정의합니다 . 96dpi와 실질적으로 다른 dpi (예 : Retina 디스플레이)의 디스플레이에서 사용자 에이전트 px는 크기가 참조 픽셀의 크기와 일치하도록 장치의 크기를 조정합니다. 다시 말해,이 크기 조정은 정확히 1 CSS 픽셀이 2 개의 실제 Retina 디스플레이 픽셀과 동일한 이유입니다.

    그러나 2010 년까지 (그리고 모바일 확대 / 축소 상황에도 불구하고) px거의 모든 실제 디스플레이는 약 96dpi이기 때문에 거의 항상 하나의 물리적 픽셀과 동일했습니다.

  • 에 지정된 크기 는 부모 요소를em 기준 으로합니다 . 이로 인해 em중첩 된 요소가 점점 커지거나 작아지는 “복합 문제”가 발생합니다. 예를 들면 다음과 같습니다.

    body { font-size:20px; } 
div { font-size:0.5em; }

    우리에게 주어지다:

    <body> - 20px
    <div> - 10px
        <div> - 5px
            <div> - 2.5px
                <div> - 1.25px

  • rem항상 루트 html요소 에만 상대적인 CSS3 는 현재 사용중인 모든 브라우저의 96 %에서 지원됩니다 .

의견

모든 사람들이 귀하의 페이지를 모든 사람에게 적합하도록 디자인하고 시각 장애인을 고려하는 것이 좋다고 생각합니다. 이러한 고려 사항 중 하나 (단 하나만이 아님)는 사용자가 사이트의 텍스트를 더 크게 만들 수있어 읽기가 더 쉽습니다.

처음에는 사용자에게 텍스트 크기를 조절할 수있는 유일한 방법은 상대 크기 단위 (예 : ems)를 사용하는 것입니다. 브라우저의 글꼴 크기 메뉴가 단순히 루트 글꼴 크기를 변경했기 때문입니다. 따라서에서 글꼴 크기를 지정 px하면 브라우저의 글꼴 크기 옵션을 변경할 때 크기가 조정되지 않습니다.

최신 브라우저 (및 최신이 아닌 IE7까지도)는 모두 기본 크기 조정 방법을 이미지 및 상자 크기를 포함한 모든 항목을 확대하는 것으로 변경했습니다. 기본적으로 참조 픽셀을 더 크게 또는 더 작게 만듭니다.

예, 누군가는 여전히 기본 글꼴 크기를 변경하여 브라우저의 기본 스타일 시트를 변경할 수 있지만 (이전 스타일의 글꼴 크기 옵션과 동일) 매우 난해한 방법이며 아무도 1을 하지 않습니다. Chrome에서는 고급 설정, 웹 콘텐츠, 글꼴 크기 아래에 묻혀 있습니다. IE9에서는 훨씬 더 숨겨져 있습니다. Alt 키를 누르고보기, 텍스트 크기로 이동해야합니다. 확대 / 축소 옵션을 선택하는 것이 훨씬 쉽습니다. 브라우저의 주 메뉴 (또는 Ctrl+ +/ -/ 마우스 휠 사용).

1-자연스럽게 통계적 오류 내

대부분의 사용자가 확대 / 축소 옵션을 사용하여 페이지 크기를 조정한다고 가정하면 관련 단위가 대부분 관련이 없습니다. 모든 것이 동일한 단위로 지정되면 (이미지는 모두 픽셀 단위로 처리됨) 페이지 합성이 훨씬 쉬워지고 합성에 대해 걱정할 필요가 없습니다. ( “수학은 없다고 들었습니다” – 실제로 1.5em이 실제로 작동하는 것을 계산해야합니다.

글꼴 크기에 상대 단위 만 사용하는 또 다른 잠재적 인 문제는 사용자 크기 글꼴이 레이아웃의 가정을 깨뜨릴 수 있다는 것입니다. 예를 들어 텍스트가 잘 리거나 너무 오래 실행될 수 있습니다. 절대 단위를 사용하면 예기치 않은 글꼴 크기로 인해 레이아웃이 깨질 염려가 없습니다.

내 대답은 픽셀 단위를 사용하는 것입니다. 나는 px모든 것에 사용 합니다. 물론 상황이 다를 수 있으며 IE6를 지원해야하는 경우 (RFC의 신들이 당신에게 자비를 베풀 수 있음), em어쨌든 s 를 사용해야 합니다.

답변

훌륭한 역사적 맥락을 제공 한 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

답변

이 문서는 꽤 잘의 장단점을 설명 px, em및 rem.

저자는 마지막으로 가장 좋은 방법 모두를 사용하는 아마 결론 지었다 px과 rem, 선언 px이전 버전의 브라우저에 대한 제 재 선언 rem최신 브라우저 :

html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

답변

반사 답변으로, 필요한 경우 전체 문서의 “확대 / 축소 수준”을 한 번에 변경할 수 있으므로 rem을 사용하는 것이 좋습니다. 경우에 따라 크기가 부모 요소를 기준으로하려는 경우 em을 사용하십시오.

그러나 rem 지원은 드문 데, IE8에는 polyfill이 필요하며 Webkit에는 버그가 있습니다. 또한, 서브 픽셀 계산은 하나의 픽셀 라인과 같은 것들이 때때로 사라질 수 있습니다. 해결책은 매우 작은 요소에 대해 픽셀 단위로 코딩하는 것입니다. 훨씬 더 복잡합니다.

따라서 전반적으로 가치가 있는지 스스로에게 물어보십시오. CSS 내에서 전체 문서의 “확대 / 축소 수준”을 변경하는 것이 얼마나 중요합니까?

어떤 경우에는 그렇습니다. 어떤 경우에는 그렇습니다.

따라서 rem과 em을 사용하면 “일반”픽셀 기반 워크 플로와 비교할 때 몇 가지 추가 고려 사항이 도입되므로 사용자의 요구에 따라 장단점을 고려해야합니다.

다음 두 CSS 코드 블록은 동일한 결과를 생성하므로 CSS를 px에서 rem (자바 스크립트는 다른 이야기 임)으로 쉽게 전환 (또는 오히려 변환) 할 수 있습니다.

html {
}

body {
  font-size:14px;
}

.someElement {
  width: 12px;
}
html {
  font-size:1px;
}

body {
  font-size:14rem;
}

.someElement {
  width: 12rem;
}

답변

예, REM과 PX는 상대적 이지만 PX보다 REM에 대한 다른 답변이 제안되었으므로 접근성 예제를 사용하여 백업하고 싶습니다.
사용자가 브라우저에서 다른 글꼴 크기를 설정하면 REM은 웹 페이지의 글꼴, 이미지 등과 같은 요소를 PX의 경우와 달리 자동으로 확대 및 축소합니다.

아래 gif에서 왼쪽 텍스트는 글꼴 크기 REM 단위를 사용하여 설정되고 오른쪽 글꼴은 PX 단위로 설정됩니다.

여기에 이미지 설명을 입력하십시오

보시다시피 웹 페이지의 기본 글꼴 크기를 조정할 때 REM이 자동으로 확대 / 축소되는 것을 볼 수 있습니다 (오른쪽 하단).

웹 페이지의 기본 글꼴 크기는 html{font-size:100%}16 픽셀이며 1rem ( 기본 HTML 페이지의 경우에만 )과 동일하므로 1.25rem은 20px입니다.

PS : 누가 REM을 사용하고 있습니까? CSS 프레임 워크! Bootstrap 4, Bulma CSS 등과 같이 잘 어울립니다.

답변

josh3736의 대답은 좋은 것이지만 3 년 후 반론을 제시하는 것입니다.

내가 사용하는 것이 좋습니다 rem는 것이 쉽게 때문 경우, 글꼴 단위를 사용하면 변경 크기로, 개발자. 사용자가 브라우저에서 기본 글꼴 크기를 거의 변경하지 않으며 최신 브라우저 확대 / 축소 기능이 px단위를 확대한다는 것은 사실 입니다. 그러나 상사가 당신에게 와서 “이미지 나 아이콘을 확대하지 말고 모든 서체를 더 크게 만드십시오”라고 말하면 어떨까요? 루트 글꼴 크기를 변경하고 다른 모든 글꼴이 그에 비례하여 px크기 를 조정 한 다음 수십 또는 수백 개의 CSS 규칙 으로 크기를 변경하는 것이 훨씬 쉽습니다 .

px디자인의 규모에 관계없이 일부 이미지 또는 크기가 항상 동일한 특정 레이아웃 요소에 단위 를 사용하는 것이 여전히 타당하다고 생각합니다 .

Caniuse.com은 josh3736이 2012 년에 답변을 게시했을 때 브라우저의 75 %만이 응답했지만 3 월 27 일 기준으로 93.78 %의 지원을 요구한다고 밝혔습니다 . IE8만이 추적하는 브라우저 중에서 지원하지 않습니다.

답변

웹 사이트의 글꼴 크기를 프로그래밍하는 가장 좋은 방법은에 대한 기본 글꼴 크기를 정의한 body다음 그 font-size이후에 선언 하는 모든 다른 사람에 대해 em (또는 rem)을 사용 하는 것입니다. 그것은 개인적으로 선호하는 것으로 생각되지만 나에게도 잘 맞았으며 반응이 빠른 디자인 을 통합하는 것이 매우 쉬워졌습니다 .

rem 단위를 사용하는 한 코드에서 점진적 인 것 사이의 균형을 찾는 것이 좋지만 이전 브라우저를 지원하는 것이 좋습니다. rem 장치에 대한 브라우저 지원에 대한이 링크를 확인하면 결정에 도움이 될 것입니다.