CSS 글꼴 단위 px, em, rem 및 %에 대한 심층적인 이해-CSS 튜토리얼-php.cn

CSS 글꼴 단위 px, em, rem 및 %에 대한 심층적인 이해

yulia

풀어 주다： 2018-09-19 14:23:00

원래의

1488명이 탐색했습니다.

페이지를 레이아웃할 때 일반적으로 길이 단위로 px를 선택합니다. em, rem 및 기타 길이 단위가 익숙하지 않은 분들이 많을 것입니다. 다음으로 CSS 글꼴 단위인 px, em, rem 및 백분율에 대해 설명하겠습니다. 도움이 필요한 친구들이 참고하면 도움이 되리라 믿습니다.

CSS 글꼴 단위는 다양합니다. 여기서는 %, px, em, rem만 소개합니다.

1. (픽셀). 상대 길이 단위. 픽셀 px는 디스플레이 화면 해상도를 기준으로 합니다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .div1{
               font-size: 20px;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            字体为20px
       </div>
    </body>
</html>

로그인 후 복사

2. Em은 길이의 상대적 단위입니다. 개체 텍스트 내의 글꼴 크기를 기준으로 합니다. 현재 인라인 텍스트의 글꼴 크기를 수동으로 설정하지 않으면 브라우저의 기본 글꼴 크기와 동일합니다.

모든 브라우저의 기본 글꼴 크기는 16px입니다. 조정되지 않은 모든 브라우저 글꼴 크기는 1em = 16px을 준수합니다. 글꼴 크기 변환을 단순화하려면 CSS의 본문 선택기에서 Font-size=62.5%를 선언해야 합니다. 그러면 em 값이 16px*62.5%=10px가 되므로 12px=1.2em, 10px=1em이 됩니다. , 또한 즉, 원래 px 값을 10으로 나눈 다음 단위를 em으로 변경하기만 하면 됩니다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            body{
                /*相对于浏览器的字体大小16px定义，此时浏览器的字体大小为10px，便于以后计算*/
                font-size: 62.5%;
            }
            .div1{
                font-size: 2em;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            字体2em相当于20px
        </div>
    </body>
</html>

로그인 후 복사

em의 특징

1 em의 값은 고정되어 있지 않습니다.

2.em의 값은 상위 글꼴 크기를 상속합니다.
3.rem은 CSS3에서 도입된 새로운 상대 단위(루트 em)입니다. Rem은 여전히 상대 크기이지만 값은 HTML에 상대적입니다. 이를 통해 루트 요소를 수정하여 모든 글꼴 크기를 비례적으로 조정할 수 있으며 레이어별로 글꼴 크기를 혼합하는 연쇄 반응을 피할 수 있습니다

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
             .div1{
                 /*相对于HTMl字体*/
                 font-size: 2rem;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            字体2rem相当于32px
        </div>
    </body>
</html>

로그인 후 복사

감사합니다!

위 내용은 CSS 글꼴 단위 px, em, rem 및 %에 대한 심층적인 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!