CSS에서 px, em, rem의 차이점

머리말

em과 rem은 유연하고 확장 가능한 단위로, 1em 값을 사용하는 경우 디자인의 글꼴 크기에 따라 브라우저에서 픽셀 값으로 변환됩니다. 또는 브라우저에서 16px에서 160px 또는 다른 값으로 변환할 수 있는 1rem입니다. 브라우저는 1px 를 사용하므로 1px는 항상 정확히 1px로 표시됩니다.

em과 rem의 유사점

em과 rem 단위를 사용하면 디자인이 더욱 유연해지고 고정된 크기 대신 요소의 전체 크기 조정을 제어할 수 있습니다

em과 rem의 차이점

브라우저가 누구를 px값으로 변환하느냐의 차이

rem 단위를 픽셀값으로 변환하는 방법

rem 단위를 사용하는 경우 픽셀 크기로의 변환은 페이지 루트 요소의 글꼴 크기, 즉 html 요소의 글꼴 크기에 따라 달라집니다. 루트 요소 글꼴 크기에 rem 값을 곱합니다.

예를 들어 글꼴 크기가 16px, 10rem인 루트 요소는 160px, 즉 10 x 16 = 160과 동일합니다.

em 단위를 픽셀 값으로 변환하는 방법 ​​

em 단위를 사용할 때 픽셀 값은 em 값에 다음을 사용하는 요소의 글꼴 크기를 곱한 값이 됩니다. 엠 단위. 예를 들어, p의 글꼴 크기가 18px인 경우 10em은 180px, 즉 10 × 18 = 180과 동일합니다.

이해해야 할 핵심 사항:

em 단위가 상위 요소에 상대적인 글꼴 크기라고 오해하는 것이 일반적입니다. 실제로 W3 표준에 따르면 em 단위를 사용하는 요소의 글꼴 크기에 상대적입니다. 상위 요소의 글꼴 크기는 em 값에 영향을 미칠 수 있지만 이는 순전히 상속 때문에 발생합니다. 왜 그리고 어떻게 작동하는지 살펴보겠습니다.

알아야 할 사항:

고정 값이 명시적으로 재정의되도록 설정되지 않는 한 루트 html 요소는 브라우저에 설정된 글꼴 크기를 상속합니다. 따라서 html 요소의 글꼴 크기는 rem 값에 의해 직접 결정되지만 글꼴 크기는 먼저 브라우저 설정에서 나올 수 있습니다. 따라서 브라우저의 글꼴 크기 설정은 rem 단위를 사용하는 모든 값과 em 단위를 통해 상속된 모든 값에 영향을 미칠 수 있습니다.

rem em과의 차이점 요약

위의 모든 내용은 다음과 같이 요약됩니다.

1. rem 단위를 픽셀 값으로 변환 ​​html 요소로 표현되며 글꼴 크기에 따라 결정됩니다. 이 글꼴 크기는 특정 단위가 명시적으로 재정의되지 않는 한 브라우저의 글꼴 크기 설정에 영향을 받습니다.
   

2. em 단위는 사용하는 글꼴 크기에 따라 픽셀 값으로 변환됩니다. 이 글꼴 크기는 특정 단위로 명시적으로 재정의되지 않는 한 상위 요소에서 상속된 글꼴 크기에 따라 결정됩니다.
   

rem 단위를 사용하는 이유:

Rem 단위는 가장 강력한 성능을 제공하며 단순히 상속이 아닌 일관된 크기를 제공하는 것만은 아닙니다. . 대신 고정된 px 단위를 사용하는 대신 웹사이트 어디에서나 rem을 사용하여 사용자 선호도를 얻고 요소 크기에 영향을 줄 수 있는 방법을 제공합니다.
이러한 이유로 rem 단위를 사용하는 주요 목적은 사용자가 브라우저를 설정하는 방식에 관계없이 레이아웃 크기를 올바른 크기로 조정하는 것입니다.

em 단위를 사용하는 이유

em 단위는 html 요소의 글꼴 크기가 아닌 글꼴 크기 값에 따라 달라집니다.

이를 위해 em 유닛의 주요 목적은 특정 디자인 요소의 범위 내에서 확장성을 허용하는 것이어야 합니다.

예를 들어 em 값을 사용하여 탐색 메뉴 항목의 패딩, 여백, 줄 높이 및 기타 값을 설정할 수 있습니다. 0.9rem 글꼴 크기의 메뉴

이렇게 하면 메뉴의 글꼴 크기를 변경하면 메뉴 항목 주위의 간격이 남은 공간에 비례하여 조정됩니다.

요약

rem 및 em 단위는 디자인의 글꼴 크기를 기준으로 브라우저에서 계산한 픽셀 값입니다.

em 단위는 이를 사용하는 요소의 글꼴 크기를 기준으로 합니다.

rem 단위는 html 요소의 글꼴 크기를 기준으로 합니다.

em 단위는 상속된 상위 요소 글꼴 크기의 영향을 받을 수 있습니다.

rem 단위는 브라우저 글꼴 설정에서 글꼴 크기를 상속할 수 있습니다.

em 단위를 사용할 때는 루트 요소의 글꼴 크기가 아닌 구성 요소의 글꼴 크기를 기준으로 해야 합니다.

em 단위를 사용할 필요가 없고 브라우저의 글꼴 크기에 따라 배율을 설정해야 하는 경우 rem을 사용하세요.

글꼴 크기를 포함하여 em 단위가 꼭 필요한 경우가 아니면 rem 단위를 사용하세요.

미디어 쿼리에 rem 단위 사용

다중 열 레이아웃에서는 em 또는 rem을 사용하지 마세요. 대신 %를 사용하세요.

크기 조정으로 인해 필연적으로 레이아웃 요소가 손상되는 경우 em 또는 rem을 사용하지 마세요.

CSS에서 px, em, rem의 차이점과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!