스타일 시트에서 픽셀 대신 em을 사용하여 크기와 거리를 정의해야한다고 들었습니다. 그래서 질문은 CSS에서 스타일을 정의 할 때 px 대신 em을 사용해야하는 이유는 무엇입니까? 이것을 보여주는 좋은 예가 있습니까?

하나가 다른 것보다 더 나은 선택이라고 말하는 것은 잘못입니다 (또는 둘 다 사양에서 자체 목적이 주어지지 않았을 것입니다). StackOverflow가 px 단위를 광범위하게 사용한다는 점도 주목할 가치가 있습니다. Spoike가 말한 것은 잘못된 선택이 아닙니다.

단위의 정의

• px 는 in , pt 또는 cm 와 같은 절대 측정 단위이며 1/96 in in 단위입니다 (나중에 더 많은 이유). 절대 측정이므로 브라우저 창의 크기 나 글꼴 크기와 같은 것에 비례하지 않고 특정 크기로 무언가를 정의하려고 할 때 언제든지 사용할 수 있습니다.

  다른 모든 절대 단위와 마찬가지로 px 단위는 브라우저 창의 너비에 따라 크기가 조정되지 않습니다. 따라서 전체 페이지 디자인에서 %가 아닌 px 와 같은 절대 단위를 사용 하는 경우 브라우저 너비에 맞지 않습니다. 이것은 본질적으로 좋거나 나쁘지 않고 디자이너가 정확한 크기에 접착하는 것과 유연하지 않은 것에 비해 유연해야하지만 정확한 크기에 맞지 않는 과정에서 선택해야하는 선택입니다. 사이트에는 고정 크기와 유연한 크기의 개체가 혼합되어있는 것이 일반적입니다.

  고정 크기 요소는 종종 광고 배너, 로고 또는 아이콘과 같이 페이지에 통합되어야합니다. 이 보장하지만 당신은 거의 항상 적어도 필요한 일부 디자인에서 픽셀 기반의 측정을. 예를 들어 이미지는 기본적으로 각 픽셀의 크기가 1 * px *가되도록 크기가 조정되므로 이미지 주위를 디자인하려면 px 단위 가 필요합니다 . 또한 정확한 글꼴 크기 및 테두리 너비에 유용합니다. 반올림으로 인해 대부분의 화면에 px 단위 를 사용하는 것이 가장 좋습니다 .

  모든 절대 측정 값은 서로 밀접하게 관련되어 있습니다. 즉, 1 인치는 것입니다 항상 96px 것처럼, 1 인치는 것입니다 항상 72pt . ( 스크린 기반 미디어에 대해 말할 때 1in 은 실제로 실제 인치 가 아닙니다 ). 모든 측정은 절대 96ppi 공칭 화면 해상도와 데스크탑 모니터 공칭 시거리를 가정하고, 이러한 스크린 상에 하나의 픽셀은 하나 개 동일 할 것이다 실제 화면의 화소 하나 의실제 픽셀은 96입니다. 픽셀 밀도 또는 시청 거리가 크게 다른 화면에서 또는 사용자가 브라우저의 확대 / 축소 기능을 사용하여 페이지를 확대 한 경우 px 는 더 이상 실제 픽셀과 관련이 없습니다.

• em 은 절대 단위가 아닙니다. 현재 선택된 글꼴 크기를 기준으로하는 단위입니다. 글꼴 크기를 절대 단위 ( px 또는 pt 등)로 설정하여 글꼴 스타일을 재정의하지 않은 경우 사용자 브라우저 나 OS에서 글꼴을 선택한 경우 글꼴 선택에 영향을받습니다. 글꼴 크기가 조정될 때 크기를 조절하려는 경우를 제외하고 em을 일반적인 길이 단위로 사용합니다.

  무언가의 크기가 현재 글꼴 크기에 따라 달라 지도록 하려면 em을 사용하십시오 .

• 또한 % 는이 경우 상위 요소의 높이 또는 너비와 관련된 상대 단위입니다. 디자인이 특정 픽셀 크기에 의존하여 크기를 설정하지 않는 경우 디자인의 총 너비와 같은 항목에 대해 px 단위를 대체 할 수 있습니다.

  디자인에 % 단위를 사용하면 디자인을 화면 / 장치의 너비에 맞게 조정할 수 있지만 px 와 같은 절대 단위를 사용 하지 않아도됩니다.

고해상도의 작은 랩톱을 사용하고 곁눈질없이 읽을 수 있으려면 120 % 텍스트 줌으로 Firefox를 실행해야합니다.

많은 사이트에서 이에 문제가 있습니다. 레이아웃이 모두 깨져서 버튼의 텍스트가 반으로 잘 리거나 완전히 사라집니다. stackoverflow.com조차도 어려움을 겪습니다.

상단 버튼과 페이지 탭이 어떻게 겹쳐 지는지 확인하십시오. px 대신 em 단위를 사용했다면 아무런 문제가 없었을 것입니다.

내가이 질문을 한 이유는 CSS에서 행복하게 해킹하는 동안 em을 사용하는 방법을 잊어 버렸기 때문입니다. 사람들은 글꼴 크기 자체에 대해 이야기하지 않았기 때문에 일반적인 질문을하지 않았다는 것을 알지 못했습니다. 페이지의 주어진 블록 요소 에 스타일을 정의하는 방법에 더 관심이있었습니다 .

으로 헨릭 바울 과 다른 사람들이 지적 EM은 요소에 사용되는 글꼴 크기에 비례한다. 블록 요소의 크기를 px로 정의하는 것이 일반적이지만 브라우저에서 글꼴 크기를 조정하면 일반적으로이 디자인이 깨집니다. 글꼴 크기 조정은 일반적으로 단축키 Ctrl+ +또는 Ctrl+로 수행 -됩니다. 따라서 대신 em을 사용하는 것이 좋습니다.

px를 사용하여 너비 정의

여기 예가 있습니다. 세련된 날짜 상자로 바꾸려는 div 태그가 있다고 가정하면 다음과 같은 HTML 코드가있을 수 있습니다.

<div class="date-box">
    <p class="month">July</p>
    <p class="day">4</p>
</div>

간단한 구현은 date-boxpx 의 클래스 너비를 정의합니다 .

* { margin: 0; padding: 0; }

p.month { font-size: 10pt; }

p.day { font-size: 24pt; font-weight: bold; }

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 50px;
}

문제

그러나 브라우저에서 텍스트 크기를 조정하려는 경우 디자인이 중단됩니다. 텍스트는 상자 밖에서 번져서 flodin이 지적한 것처럼 SO 디자인에서 발생하는 것과 거의 동일 합니다. 상자가 너비와 동일한 크기로 유지되기 때문 50px입니다.

대신 em 사용

더 똑똑한 방법은 대신 너비를 ems로 정의하는 것입니다.

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 2.5em;
}

* { margin: 0; padding: 0; font-size: 10pt; }

// Initial width of date-box = 10 pt x 2.5 em = 25 pt
// Will also work if you used px instead of pt

이렇게하면 날짜 상자에 유동적 인 디자인이 있습니다. 즉 상자는 날짜 상자에 대해 정의 된 글꼴 크기에 비례하여 텍스트와 함께 크기가 커집니다. 이 예에서 글꼴 크기는 *10pt로 정의되며 해당 글꼴 크기의 2.5 배가됩니다. 따라서 브라우저에서 글꼴 크기를 조정할 때 상자 크기는 해당 글꼴 크기의 2.5 배입니다.

여기에서 thomasrutter의 최고 투표 답변은 em 에 대한 그의 답변에서 옳습니다 . 그러나 픽셀 크기에 대해서는 매우 잘못되었습니다. 그래서 오래되었지만 논쟁의 여지가 없습니다.

컴퓨터 화면은 일반적으로 96dpi가 아닙니다! (또는 당신이 pedantic하고 싶다면 ppi.)

픽셀의 물리적 크기는 고정되어 있지 않습니다.
(예, 한 화면 내 에서만 고정 되지만 다음 화면에서는 픽셀이 크거나 작으며 1/96 인치가 아닙니다.)


증명
960 픽셀 길이의 선을 그립니다. 실제 통치자로 측정하십시오. 10 인치입니까? 아니..?
랩톱을 TV에 연결하십시오. 이제 줄이 10 인치입니까? 아직 아니에요?
당신의 아이폰에 라인을 보여줍니다. 여전히 같은 크기? 왜 안돼?

도대체 누가 96dpi 컴퓨터 화면 신화를 발명 했습니까?
(일부 종교는 72dpi 신화로 작동하지만 똑같이 잘못됩니다.)

글꼴 크기에 따라 크기를 조정해야하는 모든 항목에 사용됩니다.

글꼴 크기를 조정하여 확대 / 축소를 구현하는 브라우저에서 특히 유용합니다. 따라서 모든 요소의 크기 em를 조정하면 그에 따라 크기가 조정됩니다.

em ( http://en.wikipedia.org/wiki/Em_(typography) )은 현재 사용중인 글꼴 크기에 정비례합니다. 폰트 크기가 16 포인트이면, 하나의 em은 16 포인트이다. 글꼴 크기가 16 픽셀 인 경우 ( 참고 : 포인트와 동일하지 않음) 하나의 em은 16 픽셀입니다.

이것은 두 가지 (관련) 것들로 이어집니다.

1. 나중에 CSS에서 글꼴 크기를 편집하도록 선택하면 비율을 쉽게 유지할 수 있습니다.
2. 많은 브라우저가 CSS를 재정 의하여 사용자 정의 글꼴 크기를 지원합니다. 모든 것을 픽셀 단위로 디자인하면 이러한 경우 레이아웃이 깨질 수 있습니다. 그러나 em을 사용하면 이러한 재정의로 인해 이러한 문제가 완화됩니다.

예:

Code : body {font-size : 10px;} // 모든 크기를 10 이하로 유지하고이 값을 변경하고 나머지는이 값의 1.4로 변경합니다

1 {font-size : 1.2em;} // 12px

2 {font-size : 1.4em;} // 14px

3 {font-size : 1.6em;} // 16px

4 {font-size : 1.8em;} // 18px

5 {font-size : 2em;} // 20px

…

신체

1

2

삼

4

5

본문의 값을 변경하면 나머지는 기본 값의 일종으로 자동 변경됩니다.

10 × 2 = 20 10 × 1.6 = 16 등

기본 값을 8px로 지정할 수 있습니다. 따라서 8 × 2 = 16 8 × 1.6 = 12.8 // 브라우저로 반올림 될 수 있습니다

매우 실용적인 이유는 IE 6에서는 px를 사용하여 지정된 글꼴의 크기를 조정할 수 없지만 em 또는 백분율과 같은 상대 단위를 사용하는 경우 글꼴 크기를 조정할 수 없기 때문입니다. 사용자가 글꼴 크기를 조정할 수 없도록하면 접근성이 매우 나쁩니다. 비록 감소하고 있지만 여전히 많은 IE 6 사용자가 있습니다.

그래픽 요소를 정확하게 배치하려면 px를 사용하십시오. 선 높이 등의 텍스트 요소 주위에 배치 및 간격을 수행해야하는 측정에 em을 사용하십시오. px는 픽셀 정확도이며 사용중인 글꼴을 사용하여 동적으로 변경할 수 있습니다

em 또는 백분율을 사용하는 주된 이유는 사용자가 디자인을 중단하지 않고 텍스트 크기를 변경할 수 있기 때문입니다. px로 지정된 글꼴을 사용하여 디자인하는 경우 사용자가 텍스트 크기를 더 크게 선택하면 IE 6 및 기타 글꼴의 크기가 변경되지 않습니다 . 시각적 장애가있는 사용자에게는 매우 나쁩니다.

이와 같은 디자인에 대한 몇 가지 예와 기사 (선택할 수있는 수많은 항목이 있음)는 최신 목록 인 A List Apart : Fluid Grids , 이전 기사 CSS에서 텍스트 크기를 조정하는 방법 또는 Dan Cederholm의 Bulletproof Web Design을 참조하십시오. .

이미지는 여전히 px 크기로 표시되어야하지만 일반적으로 px로 텍스트 크기를 조정하는 데 적합한 형식은 아닙니다.

내가 개인적으로 IE6를 멸시하는 것처럼, 그것은 현재 Fortune 200 회사의 많은 사용자에게 승인 된 유일한 브라우저입니다.

px를 사용하여 글꼴 크기를 지정하고 싶지만 CSS 파일에 이것을 배치하여 제공되는 유용성을 원하는 경우 간단한 해결책이 있습니다.

body {
  font-size: 62.5%;
}

이제 다음 p과 같이 (및 다른) 태그를 지정 하십시오.

p {
  font-size: 0.8em; /* This is equal to 8px */
  font-size: 1.0em; /* This is equal to 10px */
  font-size: 1.2em; /* This is equal to 12px */
  font-size: 2.0em; /* This is equal to 20px */
}

등등.

IE6가 사라질 때까지 (사이트에서) 글꼴 크기로 em을 사용하고 싶을 것입니다. 페이지 확대 / 축소 (텍스트 확대 / 축소와 반대)가 표준 동작이되면 Px가 정상입니다.

Traingamer는 이미 필요한 링크를 제공했습니다 .

픽셀 은 절대 단위이고 rem / em 은 상대 단위입니다. 자세한 내용은 https://drafts.csswg.org/css-values-3/

시스템은 글꼴 크기 값을 HTML 요소 인 루트 요소에 제공하므로 시스템의 글꼴 크기에 따라 글꼴 크기를 적응 시키려면 상대 단위를 사용해야합니다 .

이 경우 Google 크롬에서 웹 페이지가 열려있는 경우 HTML 요소 의 글꼴 크기 는 크롬으로 설정됩니다. rem / em 단위의 글꼴이있는 웹 페이지에 영향을 미치도록 변경하십시오.

당신이 사용하는 경우 px글꼴을 단위로의 글꼴과 글꼴 반면 크기를 조정하지 않습니다 rem/em 시스템의 글꼴 크기를 변경할 때 단위가 .

사용 그래서 px당신은 크기가 고정되어야 할 때 사용 rem/ em당신은 크기가 시스템의 크기에 적응 /의 동적하고자 할 때.

일반적인 합의는 글꼴 크기 조정에 백분율을 사용하는 것입니다. 이는 브라우저 / 플랫폼에서보다 일관성이 있기 때문입니다.

재미있는 점은 항상 글꼴 크기 조정에 pt를 사용했으며 모든 사이트에서 사용한다고 가정했습니다. 일반적으로 다른 앱 (예 : Word)에서는 px 크기를 사용하지 않습니다. 인쇄용이기 때문에-웹 브라우저의 크기는 Word와 동일합니다 ...

em 또는 px 대신 rem을 사용하지 마십시오. 대신 계산 된 값을 쉽게 찾을 수 있기 때문입니다. 그러나 em과 px 사이에서 em은 디버깅하기 어렵 기 때문에 px가 더 좋습니다.