글꼴 크기:em,rem,픽셀 또는 퍼센트?

첫 포트폴리오 사이트를 만들고 반응형으로 만들려고 하던 때가 아직도 기억나는데, 미디어 쿼리를 많이 만들어도 원하는 반응성을 얻을 수 없었습니다. 완전 답답했어요.

그러다가 픽셀 단위의 글꼴 크기를 사용했기 때문이라는 것을 알게 되었습니다.

그러니 친애하는 친구 여러분, 저처럼 단순한 일에 소중한 시간을 낭비하지 않으셨으면 합니다!
그러니 끝까지 읽으세요.
pixels ( px ) 확장되지 않습니다.absolute 단위입니다.

반면 em , rem는 relative/responsive 단위입니다.
뷰포트에 따라 크기가 조정됩니다.
parent 또는 root 요소 값의 변경은 상대 단위의 값에 영향을 미칩니다.em는 패딩, 여백, 줄 높이 등에 사용해야 합니다.

자, 엠과 렘을 공부하기 전에,
리멤버default font size of browser is 16px .

따라서 1rem = 16px by default.

EM 사용 - 요소

For eg.

스타일

계산된 스타일


html {
글꼴 크기:18px;
}

부분 {
글꼴 크기:14px;
패딩:3em;
}

html {
글꼴 크기:18px;
}

부분 {
글꼴 크기:14px;
패딩:42px;
}



따라서 html 요소 em에 지정된 글꼴 크기와 관계없이 로컬 요소의 글꼴 크기를 사용합니다.
그리고 글꼴 크기가 로컬 요소에 정의되어 있지 않으면 부모 요소를 확인합니다.
이것은 em 단위의 상속의 일부입니다.
이 블로그의 뒷부분에서 상속에 대해 자세히 알아볼 것입니다.

REM 사용 - 루트 요소

For eg.

스타일

계산된 스타일


html {
글꼴 크기:18px;
}

부분 {
글꼴 크기:14px;
패딩:3rem;
}

html {
글꼴 크기:18px;
}

부분 {
글꼴 크기:14px;
패딩:54px;
}



로컬 요소에 정의된 글꼴 ​​크기와 관계없이 루트 요소, 즉 html의 값을 사용합니다.

EM 단위에 대한 상속 효과

상속은 게임을 em 단위로 변경하고 상당히 복잡하게 만듭니다.

em을 사용하면 자식 요소는 부모의 값을 조부모까지 상속합니다.

<section class="wrapper">
    Grandparent
    <div class="container">
        Parent
        <div class="container">
            Child
        </div>
    </div>
</section>

스타일

계산된 스타일


html {
글꼴 크기:16px;
}

.wrapper {
글꼴 크기:1.5em;
}

.컨테이너 {
패딩:2em;
}


html {
글꼴 크기:16px;
}

.wrapper {
글꼴 크기:24px;//16 * 1.5//
}

.컨테이너 {
패딩:48px;//24 * 2//
}



상속된 값을 재정의하려면 단위 요소를 명시적으로 px 로 설정해야 합니다.

스타일시트

<section class="page-wrapper">
    GrandParent
    //16px
    <div class="container">
        Parent
        //24 * 1.5 = 36px;
        <div class="container">
            Child
            //36 * 1.5 = 54px;
        </div>
    </div>
</section>

html {
    font-size: 16px;
}
.page-wrapper {
    font-size:24px;
}

.container {
    font-size:1.5em;
}

여기서 .container 클래스가 있는 div의 글꼴 크기는 부모 요소를 기반으로 계산됩니다.
여기서 흥미로운 점은 위의 HTML에서 부모와 자식이 동일한 클래스 이름을 공유한다는 사실과 관계없이 글꼴 크기가 동일하다는 것입니다not.

퍼센트

사이트를 반응형으로 만들 때 특별히 백분율을 사용하십시오.
또한 사용 편의성을 위해 대부분의 프로그래머는 다음을 수행합니다.

html {
    font-size:62.5%;
}

따라서 지금1rem = 10px;이렇게 하면 추가 계산이 더 쉬워집니다.

결론

These are just my personal recommendations based on my research and studies.

em는 패딩, 여백, 줄 높이 등에 사용해야 합니다.em 속성이 뷰포트 변경에 따라 크기가 조정되는 요소의 경우.

그 밖의 모든 것에는 rem를 사용하십시오.

뷰포트를 변경하려면 글꼴 크기에 % 단위를 사용하십시오. 이렇게 하면 글꼴 크기가 반응합니다.

Note:
Guys, I have taken reference of this blog.
Sizing in CSS: px vs em vs rem
This is really a very helpful blog!
Do give it a read for more undertanding.