development

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

big-blog 2020. 3. 3. 23:00
반응형

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;
}

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

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

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

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

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

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

ptrem호환되지 않는 브라우저 px가 기기 의존적 방식으로 처리 되는 경우에도 비교적 고정되어 있지만 거의 항상 DPI 독립적이라는 점에서는 유사합니다 . rem루트 요소의 글꼴 크기에 따라 다르지만 Sass / Compass와 같은 것을 사용하여 자동 으로이 작업을 수행 할 수 있습니다 pt.

당신이 이것을 가지고 있다면 :

html {
    font-size: 12pt;
}

그때 1rem는 항상 그렇습니다 12pt. rem그리고 em그들이 의존하는 요소만큼 장치 독립적입니다. 일부 브라우저는 사양에 따라 작동하지 않고 px그대로 취급 합니다. 예전의 웹에서도 1 포인트는 1/72 인치로 일관되게 간주되었습니다. 즉, 1 인치에 72 포인트가 있습니다.

이전의 비 호환 브라우저가 있고 다음이있는 경우 :

html {
    font-size: 16px;
}

그런 다음 1rem장치에 따라 다릅니다. html기본적으로 상속되는 요소의 1em경우 장치에 따라 다릅니다. 12pt것입니다 희망 : 보장 장치 독립적 상응하는 16px / 96px * 72pt = 12pt, 96px = 72pt = 1in.

특정 단위를 고수하려는 경우 수학을 수행하는 것이 상당히 복잡해질 수 있습니다. 예를 들어, .75em of html = .75rem = 9pt및 .66em of .75em of html = .5rem = 6pt. 좋은 경험 법칙 :

  • pt절대 크기에 사용하십시오 . 루트 요소에 비해 동적이어야하는 경우 CSS를 너무 많이 요구합니다. Sass / SCSS와 같이 CSS로 컴파일되는 언어가 필요합니다.
  • em상대 크기에 사용하십시오 . "왼쪽의 여백이 글자의 최대 너비에 가깝기를 원합니다"또는 "이 요소의 텍스트를 주변보다 약간 크게 만드십시오"라고 말할 수있어 매우 편리합니다. <h1>여러 위치에 나타날 수 있지만 항상 주변 텍스트보다 커야하므로 ems에서 글꼴 크기를 사용하는 데 유용한 요소입니다. 이 방법으로 적용되는 모든 클래스에 대해 별도의 글꼴 크기를 가질 필요는 없습니다 h1. 글꼴 크기가 자동으로 조정됩니다.
  • px매우 작은 크기에 사용하십시오 . 매우 작은 크기에, pt이후 96 DPI에서 일부 브라우저에서 흐릿하게 얻을 수 pt와 px매우 일치하지 않습니다. 얇은 1 픽셀 테두리를 만들려면 그렇게 말합니다. 높은 DPI 디스플레이를 사용하는 경우 테스트하는 동안 분명하지 않으므로 특정 시점에서 일반 96-DPI 디스플레이에서 테스트해야합니다.
  • 높은 DPI 디스플레이에서 일을 멋지게 만들기 위해 서브 픽셀을 다루지 마십시오. 일부 브라우저는 특히 높은 DPI 디스플레이에서이를 지원할 수 있지만, 그렇지 않습니다. 웹은 개발자에게 다른 방법을 가르쳐 주었지만 대부분의 사용자는 크고 명확한 것을 선호합니다. 최첨단 화면을 사용하여 사용자를 위해 세부 정보를 확장하려면 벡터 그래픽 (SVG)을 사용하면됩니다.

절반 (그러나 절반 만)은 답답한 답변입니다 (다른 절반은 관료주의의 현실에 대한 끔찍한 경멸입니다).

vh 사용

모든 것은 항상 브라우저 창 크기입니다.

옆으로 스크롤하지 말고 항상 아래로 스크롤하십시오.

몸통 너비를 정적 50vh로 설정하고 부모 div에서 떠 내거나 끊지는 것은 없습니다. 그리고 테이블을 사용하여 스타일을 지정하면 모든 것이 예상대로 단단히 고정됩니다. 사용자가 할 수있는 ctrl +/- 활동을 취소하기위한 자바 스크립트 기능을 포함합니다.

실물 크기의 모형을 만들어달라고 말한 사람들을 제외하고는 모두 당신을 미워할 것입니다. 그리고 모든 사람은 자신의 의견이 중요한 것이라는 것을 알고 있습니다.

예. 아니면 오히려 아닙니다.

어, 그건 상관 없어 특정 프로젝트에 적합한 것을 사용하십시오. PX 및 EM 또는 둘 다 동일하게 유효하지만 전체 페이지의 CSS 아키텍처에 따라 약간 다르게 작동합니다.

최신 정보:

명확히하기 위해, 일반적으로 사용하는 것이 중요하지 않을 것이라고 말하고 있습니다. 때때로, 당신은 구체적으로 하나를 선택하고 싶을 수도 있습니다. EM은 처음부터 시작할 수 있고 기본 글꼴 크기를 사용하고 그와 관련된 모든 것을 만들려는 경우 좋습니다.

PX는 기존 코드베이스에 재 설계를 개조 할 때 종종 필요하며 잘못된 중첩 문제를 방지하기 위해 px의 특이성이 필요합니다.

em은 글꼴뿐만 아니라 상자, 선 두께 및 기타 것들과 함께 사용할 수있는 이유입니다.

간단히 말해 em은 브라우저에서 alt + 및 alt- 키와 함께 확대 / 축소 할 수있는 유일한 것입니다.

다른 측정 값은 확장 할 수 있지만 em만큼 깨끗하지는 않습니다.

스케일링에서 최상의 결과를 얻으려면 가능한 한 그래픽을 벡터 기반 SVG로 변환하십시오. 브라우저의 줌 비율로 깨끗하게 스케일링 할 수도 있습니다.

EM은 맹인뿐만 아니라 사람들이 항상하는 +/- 스케일링을 처리하는 미디어 쿼리에 대해서만 스케일되는 것입니다. 이것이 중요한 이유에 대한 매우 잘 쓰여진 또 다른 전문 시연입니다.

그건 그렇고, Zurb Foundation이 ems를 사용 하는 반면 하위 부트 스트랩 3은 여전히 ​​픽셀을 사용합니다.

참고 URL : https://stackoverflow.com/questions/11799236/should-i-use-px-or-rem-value-units-in-my-css



반응형

'development' 카테고리의 다른 글

익명 클래스에서 최종 변수에만 액세스 할 수있는 이유는 무엇입니까?  (0) 2020.03.03
jQuery Validate Plugin-간단한 커스텀 규칙을 만드는 방법?  (0) 2020.03.03
지속적인 통합 및 지속적인 배포 및 지속적인 배포  (0) 2020.03.02
가장 유용한 NLog 구성  (0) 2020.03.02
소프트웨어 디자인과 소프트웨어 아키텍처 비교  (0) 2020.03.02

'development'의 다른글

  • 현재글CSS에서 px 또는 rem 값 단위를 사용해야합니까?

관련글

댓글

티스토리툴바