방법 - 반응형 텍스트
CSS로 반응형 타이포그래피를 만드는 방법을 알아보세요.
헬로월드
브라우저 창의 크기를 조정하여 글꼴 크기가 어떻게 조정되는지 확인합니다.
반응형 글꼴 크기
vw
텍스트 크기는 "뷰포트 너비"를 의미 하는 단위로 설정할 수 있습니다 .
그렇게 하면 텍스트 크기가 브라우저 창의 크기를 따릅니다.
예시
<h1 style="font-size:8vw;">Hello World</h1>
<p
style="font-size:2vw;">Resize the browser window to see how the font size
scales.</p>
뷰포트는 브라우저 창 크기입니다. 1vw = 뷰포트 너비의 1%. 뷰포트의 너비가 50cm인 경우 1vw는 0.5cm입니다.
미디어 쿼리로 글꼴 크기 변경
미디어 쿼리를 사용하여 특정 화면 크기에서 요소의 글꼴 크기를 변경할 수도 있습니다.
가변 글꼴 크기.
예시
/* If the screen size is 601px wide or
more, set the font-size of <div> to 80px */
@media screen and (min-width:
601px) {
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px wide or less,
set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
팁: 글꼴 에 대해 자세히 알아보려면 CSS 글꼴 자습서로 이동하십시오 .
미디어 쿼리에 대해 자세히 알아보려면 CSS 미디어 쿼리 자습서 를 읽어보세요 .