CSS3에서 REM 사용 소개

페이지에 글꼴을 설정하려면 px와 em이라는 두 가지 일반적인 글꼴이 있다는 것을 알고 있습니다.

px

웹 페이지 제작에서는 일반적으로 "px"를 사용하여 글꼴을 설정합니다. 텍스트가 더 안정적이고 정확하기 때문입니다. 하지만 이 방법에는 문제가 있습니다. 사용자는 브라우저에서 만든 웹 페이지를 탐색할 때 브라우저의 글꼴 크기를 변경합니다(대부분의 사람들은 이때 브라우저의 글꼴 크기를 변경하지 않습니다). 우리 웹 페이지 페이지 레이아웃을 사용할 예정인데 웹 페이지의 글꼴을 정의하기 위해 "em"을 사용하는 것이 제안되었습니다.

em

은 일반적으로 본문의 글꼴 크기

를 기준으로 합니다. 일반적으로 작성되는 내용은 다음과 같습니다.

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"은 상대값이고, 상위 요소에 대한 상대값이므로 해당 상위 요소의 설정을 알아야 합니다.

계산식: 1 ¼ 부모 요소 글꼴 크기 값이 확실하지 않으므로 문제를 해결하려면 부모 요소의 값을 알거나 자식 요소에 "1em"을 사용하십시오.

rem

rem: W3C 공식 웹사이트 설명은 "루트 요소의 글꼴 크기"입니다. 즉, 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"의 차이를 해결할 수 있습니다.

참고: Chrome에서 기본 하단 글꼴은 12px이고 글꼴 크기: 625% 등을 설정할 수 있습니다.

브라우저 호환성

IE9 이상 CSS3를 지원하는 브라우저는 반드시 이를 지원할 것입니다. IE 하위 버전과 호환되길 원한다면 IE9 이하 버전의 브라우저에서는 px 사용을 고려해 보세요.

위 내용은 CSS3에서 REM 사용 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!