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은 루트 요소에 대해 상대적입니다.

루트 요소에서 참조 값을 결정하고 루트 요소에서 글꼴 크기를 설정하면 됩니다. 이는 전적으로 사용자의 필요에 따라 설정할 수도 있습니다.

pxtoem

변환이 번거로운 학생은 http://pxtoem.com/ 홈페이지에 접속하여 설정하실 수도 있습니다.

자주 쓰는 글:

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

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*/
}

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

위는 CSS3의 REM 사용에 대한 자세한 설명입니다. , 더보기 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!