CSS에서 반응형 글꼴 크기를 만드는 방법은 무엇입니까?

우리는 일반적으로 웹에서 반응형 디자인과 이미지에 대해 이야기합니다. 반응형 웹 사이트의 핵심 부분인 글꼴을 만드는 것을 생각해 보셨습니까? 걱정하지 마세요. 이 기사에서는 웹사이트에 있는 모든 글꼴의 글꼴 크기를 동적으로 변경할 수 있는 방법에 대해 설명합니다.

시작하자

우리는 일반적으로 글꼴의 글꼴 크기를 다음과 같이 설정합니다font-size: 80px;. 여기서 글꼴 크기의 단위는 픽셀 즉 px 입니다. 다음은 단위px로 글꼴 크기를 조정하려고 할 때 표시되는 모양입니다.

.container{
     font-size: 80px;
}

반응형 글꼴을 만들어 봅시다

응답성을 높이려면 - vw라는 새로운 CSS 단위를 처리해야 합니다. vw는 뷰포트의 1% 너비에 상대적인 뷰포트 너비를 나타냅니다.

위의 예를 가지고 font-size를 5vw로 변경하고 마술을 보자 🤩

.container{
     font-size: 8vw;
}

여기에서 브라우저 창의 크기를 조정해 보십시오Pen.

결론

이 기사가 도움이 되었기를 바랍니다. 읽어 주셔서 감사합니다!

연결하자

GitHub

제 콘텐츠가 도움이 되셨다면 저에게 감사의 말씀을 전하고 싶다면 Buy me a coffee으로 연락주세요 :)

좋은 하루 되세요!