CSS3 rem 분석에 대해(글꼴 크기 설정)

이 글은 주로 CSS3 rem(글꼴 크기 설정) 튜토리얼에 대한 자세한 설명을 소개합니다. 내용이 꽤 좋아서 지금 공유하고 참고하겠습니다.

css3은 새로운 상대 단위 rem을 추가합니다. rem을 사용하는 것은 상대 글꼴 크기 단위인 em과 동일합니다. 차이점은 rem이 HTML 루트 요소에 상대적이라는 점입니다. 렘에 대한 언급이 많은 네티즌들이 있어서 여기서는 그중 하나를 요약해보겠습니다.

웹에서 페이지의 글꼴 크기를 정의하려면 어떤 단위를 사용해야 할까요? 오늘날에도 여전히 치열한 논쟁이 벌어지고 있습니다. 어떤 사람은 PX가 좋은 단위라고 하고, 어떤 사람은 EM이 장점이 많다고 합니다. 백분율은 CSS Font-Size: em 대 px 대 pt 대 백분율과 같은 PK의 전반적인 상황을 나타내기 때문에 편리합니다. 불행하게도 각 기술을 이상적이지는 않지만 여전히 사용하지 않는 데에는 여러 가지 장단점이 있습니다.

rem을 자세히 소개하기 전에 가장 논란이 많은 두 가지 측정 단위인 일반적으로 사용되는 두 가지 측정 단위를 먼저 검토하겠습니다.

1. PX는 단위입니다

2. EM은 단위입니다

px 단위는

웹 페이지 초기 제작에서는 더 안정적이고 정확하기 때문에 항상 "px"를 사용하여 텍스트를 설정합니다. 하지만 이 방법에는 문제가 있습니다. 사용자가 브라우저에서 만든 웹 페이지를 탐색할 때 브라우저의 글꼴 크기를 변경하면 웹 페이지의 레이아웃이 깨집니다. 이는 웹사이트의 유용성을 걱정하는 사용자에게 큰 문제입니다. 따라서 웹페이지의 글꼴을 정의하기 위해 "em"을 사용하는 것이 제안되었습니다.

em이 단위입니다

앞서 언급했듯이 "px"를 단위로 사용하는 것이 더 편리하고 일관성이 있지만, 이를 해결하기 위해 브라우저에서 확대/축소할 때 문제가 발생합니다. 문제는 "em" 단위를 사용할 수 있다는 것입니다.

이 기술에는 일반적으로

의 "글꼴 크기"를 기반으로 하는 참조점이 필요합니다. 예를 들어, "10px"와 동일한 "1em"을 사용하여 기본값 "1em=16px"을 변경합니다. 이런 식으로 글꼴 크기를 "14px"와 동일하게 설정하면 해당 값만 다음과 같이 설정하면 됩니다. "1.4em".

body {
    font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/
}
h1 {
    font-size: 2.4em; /*2.4em × 10 = 24px */
}
p   {
    font-size: 1.4em; /*1.4em × 10 = 14px */
}
li {
    font-size: 1.4em; /*1.4 × ? = 14px ? */
}

"li"의 "1.4em"이 "14px"인지가 왜 물음표인가요? "em"을 이해한다면 이 질문이 너무 많아서 물어볼 수 없다는 느낌이 들 것입니다. 앞에서 간략하게 소개한 것처럼 "em"을 단위로 사용할 경우 "em"은 상대값이고, 실제 계산식은 다음과 같기 때문에 상위 요소의 설정을 알아야 합니다. :

1 ¼ 상위 요소의 글꼴 크기 × 변환할 픽셀 값 = em 값

이 경우 "1.4em"은 짧게 "14px" 또는 "20px" 또는 "24px" "일 수 있습니다. 는 불확실한 값이므로 이 문제를 해결하려면 상위 요소의 값을 알거나 하위 요소에 "1em"을 사용하세요. 이것은 우리에게 필요한 방법이 아닐 수도 있습니다.

rem은 단위입니다.

CSS3의 출현과 함께 그는 오늘날 우리가 rem이라고 부르는 것을 포함하여 몇 가지 새로운 단위도 도입했습니다. Rem은 W3C 공식 웹사이트에 "루트 요소의 글꼴 크기"와 같이 설명되어 있습니다. 렘을 좀 더 자세히 살펴보자.

앞서 언급했듯이 "em"은 상위 요소를 기준으로 글꼴 크기를 설정합니다. 이는 모든 요소 설정에 대해 여러 번 사용할 때 상위 요소의 크기를 알아야 할 수 있습니다. 예측할 수 없는 오류가 발생할 위험이 있습니다. 그리고 rem은 루트 요소인 에 상대적입니다. 즉, 루트 요소에서 참조 값을 결정하고 루트 요소에서 글꼴 크기를 설정하기만 하면 됩니다. 이는 전적으로 사용자의 필요에 따라 설정할 수 있습니다. 아래 그림도 참고하세요.

간단한 예를 살펴보겠습니다.

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

루트 요소 에 기본 글꼴 크기를 62.5%(즉, 10px)로 정의했습니다. 주로 계산을 용이하게 하기 위해 이 값을 설정하며, 설정이 없을 경우 "16px" 기준으로 적용됩니다. 위의 계산 결과에서 "rem"을 "px"처럼 편리하게 사용할 수 있으며 동시에 "px"와 "em"의 차이를 해결할 수 있습니다.

브라우저 호환성

rem은 CSS3에 새로 도입된 측정 단위입니다. 누구나 확실히 브라우저 지원에 대해 좌절감을 느끼고 걱정할 것입니다. 실제로 Mozilla Firefox 3.6+, Apple Safari 5+, Google Chrome, IE9+ 및 Opera11+와 같이 지원되는 브라우저가 꽤 많다는 사실에 놀라지 마세요. 불쌍한 IE6-8은 할 수 없기 때문에 그냥 투명하게 취급하십시오. 저는 항상 이랬습니다.

그러나 단위를 사용하여 글꼴을 설정할 때 IE를 완전히 무시할 수는 없습니다. 이 REM을 사용하고 싶지만 IE에서 효과와도 호환되기를 원한다면 "px"와 "rem"을 함께 사용하는 것을 고려해 볼 수 있습니다. IE6-8에서 효과를 얻으려면 "px"를 사용하고 브라우저의 효과를 얻으려면 "Rem"을 사용하십시오. Ie6-8이 텍스트 변경으로 변경되지 않도록 놔두세요. 누가 이 Ie6-8을 그렇게 오래되게 만들까요?

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되길 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 참고해주세요!

관련 권장 사항:

CSS 정보 배경 사용 방법

다른 브라우저에서 CSS Hack의 호환성 정보

위 내용은 CSS3 rem 분석에 대해(글꼴 크기 설정)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!