• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

vw 사용 시 글씨 밀림 문제

21.08.10 21:39 작성 조회수 362

0

안녕하세요, 선생님.
강의를 듣던 중 mid-message에 vw값을 주고
브라우저를 일정 크기 이상 키우면 사진과 같이 글자가 커지다가 밀려서 내려가는 현상이 발생합니다.
폰트 사이즈에 상한선을 걸 수 있을까요?

답변 1

답변을 작성해보세요.

1

미디어 쿼리로 디자인에 맞게 폰트 사이즈를 조정해주시면 됩니다.
예를들어 기본적으로는 .foo 요소의 폰트사이즈를 10vw로 하고
브라우저 폭이 600픽셀 이하가 되면 40px로 고정한다면 아래와 같이 하면 되겠지요~
반대로 하시려면 max-width 대신 min-width를 쓰시면 되고요.

.foo {
    font-size: 10vw;
}

@media (max-width: 600px) {
    .foo {
        font-size: 40px;
    }
}

건우 김님의 프로필

건우 김

질문자

2021.09.29

감사합니다, 선생님!