CSS에서 em과 px의 차이점은 무엇입니까?


대답 1:

결국, 그것은 모든 픽셀입니다

궁극적으로 웹 브라우저는 운영 체제에 디스플레이 드라이버가 화면에 무언가를 픽셀 단위로 배치하도록 지시합니다.

그러나 "픽셀"은 실제 픽셀입니다. 이것이 "장치 픽셀"이라고 부르는 것입니다.

"장치 픽셀"에 대해 말하는 것이 아닙니다. CSS Pixels에 대해 이야기하고 있습니다.

CSS 픽셀! == 픽셀

"CSS 픽셀"은 장치 픽셀과 거의 비슷합니다. [1] CSS Pixel은 팔의 길이가 약 96dpi 인 픽셀 밀도를 가진 장치의 시각적 각도 인 "참조 픽셀"이라는 아이디어에 의존합니다. [2] 수학의 힘을 통해 "참조 픽셀"은 화면에서 1.3mm 그러나 그럴 수없는 여러 가지 이유가 있습니다.

px가 "화면의 픽셀"을 의미하지 않는 기본 사항부터 시작하는 것이 중요합니다.

CSS에는 다른 측정 단위가 있습니다

측정 단위에는 두 가지 주요 범주가 있습니다 [3] :

  1. 절대 단위 상대 단위

그것이 "절대 단위"라면, 그 측정 단위는 물리적 세계에서 무언가와 관계가 있습니다.

상대 단위이면 값은 절대 단위로 계산됩니다.

따라서 px 대 em

px는 "절대 단위"입니다. CSS 엔진은 사이징을 위해 "길이"를 사용하도록 브라우저에 지시합니다. 브라우저와 OS는 길이가 "장치 픽셀"과 어떻게 비교되는지를 정렬하여 렌더링합니다. Px는 앞에서 언급 한 "참조 픽셀"과 정적 인 관계가 있습니다. px 변경되지 않습니다.

em은“상대적 단위”입니다. CSS 엔진은이 값을 픽셀 길이로 먼저 계산합니다. 픽셀 길이를 계산 한 후에는 계산 된 값을 브라우저로 보냅니다. 특히 em은 포함하는 요소의 상대적 글꼴 크기를 기반으로 계산됩니다. em의 가치는 변할 수있다. 부모 요소의 글꼴 크기를 변경하면 em의 값에 영향을 미칩니다.

em을 생각하는 가장 좋은 방법은 em 비트가 없다고 가정하고 값을 승수로 취급하는 것입니다. 예 :

.foo {글꼴 크기 : 1.5em; / * 혼란스러운 * / 글꼴 크기 : 1.5; / * 유효하지는 않지만, em * / line-height : 1.5; / * line-height가 단위없는 승수를 어떻게 받아들이는지보십시오 * /}

첫 번째 큰 차이점은 하나는 절대적이고 다른 하나는 상대적입니다.

응용 프로그램의 px 및 em

각기 다른 상황에 따라 각 유닛의 장단점이 강조됩니다 [4].

px는 절대 측정 단위이므로 화면에 표시되는 내용에 대한 예측 가능성이 높습니다. 그러나 당신은 비례 성이 없습니다. 부모의 글꼴 크기를 조정하면 px 크기의 속성이 다시 계산되지 않습니다.

그래서 당신은 이것을 많이 겪습니다.

본문 {font-size : 16px;} h1 {font-size : 32px; / * 글꼴 크기의 절대 단위 * / 패딩 : 8px 16px; / * 패딩을위한 절대 단위 * /} .foo {font-size : 12px; / * 부모의 글꼴 크기 조정 * /} / * 일을 비례 적으로 유지하기 위해 새로운 규칙 세트를 작성합니다 * / .foo h1 {font-size : 24px; / * 글꼴 규칙을 다시 작성하여 h1을 2 배로 보통으로 만듭니다 * / 패딩 : 6px 12px; / * 1/4 및 1/2에 대한 재 작성 * /}

em은 상속 된 글꼴 크기를 기반으로하는 상대적 단위이므로 화면에 표시되는 내용, 특히 대규모 팀에서 예측 가능성이 낮을 수 있습니다. 그러나 당신은 높은 비례 성을 가질 것입니다; 부모에서 글꼴 크기를 조정하면 em 크기의 속성이 다시 계산됩니다.

본문 {font-size : 16px;} h1 {font-size : 2em; / * 상대 단위 * / 패딩 : .25em .5em; / * 패딩의 상대 단위 * /} .foo {font-size : .75em; }

em을 사용하여 전체 규칙 세트를 작성하는 것을 저장했습니다. 글꼴 크기는 24px로, 패딩은 6px 12px로 계산되었습니다.

큰 차이점은 더 많은 코드를 작성하지 않고도 크기를 비례 적으로 조정할 수 있다는 것입니다!

각주

[1] 구문 및 기본 데이터 유형

[2] CSS 값 및 단위 모듈 레벨 3

[3] CSS에서 "em" "px"및 "%"는 어떻게 다른가요?

[4] 반응 형 웹 사이트는 CSS에서 측정 방식에 관한 모든 것입니다.


대답 2:

px는 픽셀입니다. 브라우저마다 약간 다를 수 있지만 동일한 환경 내에서 특정 브라우저 / 장치의 사이트간에 일관 될 수 있습니다. px는 선 및 경계 너비와 같은 항목에 적합합니다.

em은 현재 요소의 글꼴 크기와 동일합니다 (일반적으로 상 속됨). 글꼴 크기가 변경되면 em 값도 변경됩니다. 텍스트의 현재 크기를 기준으로 무언가를 배치하려는 경우에 유용합니다. 다른 콘텐츠와 관련이 있기 때문에 화면 전체에서 작동 할 가능성이 높으므로 유용합니다. em은 텍스트 주위의 간격, 여백 및 패딩을 설정하는 데 특히 유용합니다.

rem은 루트 em입니다. em과 비슷하지만 현재 글꼴 크기에 상대적이 아니라 원본 문서 글꼴 크기에 상대적입니다. 즉, 현재 글꼴에 관계없이 rem이 한 페이지에서 일관성을 유지합니다. 많은 상황에서 rem은 예측하기 쉽기 때문에 작업하기가 더 쉽습니다. 로컬 글꼴 크기가 요소간에 변경되는 경우에도 문서에서 일관성을 유지해야하는 여백에 특히 적합합니다.

일반적으로 em과 rem은 한 페이지에서 유지하기가 더 쉬우 며 현재 일반적인 합의는 px 대신 em과 rem을 사용하는 것입니다. 일반적인 합의가 항상 옳은 것은 아니지만 다른 일을 할만한 충분한 이유가없는 한 좋은 길입니다.


대답 3:

px는 픽셀입니다. 브라우저마다 약간 다를 수 있지만 동일한 환경 내에서 특정 브라우저 / 장치의 사이트간에 일관 될 수 있습니다. px는 선 및 경계 너비와 같은 항목에 적합합니다.

em은 현재 요소의 글꼴 크기와 동일합니다 (일반적으로 상 속됨). 글꼴 크기가 변경되면 em 값도 변경됩니다. 텍스트의 현재 크기를 기준으로 무언가를 배치하려는 경우에 유용합니다. 다른 콘텐츠와 관련이 있기 때문에 화면 전체에서 작동 할 가능성이 높으므로 유용합니다. em은 텍스트 주위의 간격, 여백 및 패딩을 설정하는 데 특히 유용합니다.

rem은 루트 em입니다. em과 비슷하지만 현재 글꼴 크기에 상대적이 아니라 원본 문서 글꼴 크기에 상대적입니다. 즉, 현재 글꼴에 관계없이 rem이 한 페이지에서 일관성을 유지합니다. 많은 상황에서 rem은 예측하기 쉽기 때문에 작업하기가 더 쉽습니다. 로컬 글꼴 크기가 요소간에 변경되는 경우에도 문서에서 일관성을 유지해야하는 여백에 특히 적합합니다.

일반적으로 em과 rem은 한 페이지에서 유지하기가 더 쉬우 며 현재 일반적인 합의는 px 대신 em과 rem을 사용하는 것입니다. 일반적인 합의가 항상 옳은 것은 아니지만 다른 일을 할만한 충분한 이유가없는 한 좋은 길입니다.