인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

건우 김님의 프로필 이미지
건우 김

작성한 질문수

애플 웹사이트 인터랙션 클론!

페이지 내용 CSS 작성 2

vw 사용 시 글씨 밀림 문제

작성

·

468

0

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

답변 1

1

1분코딩님의 프로필 이미지
1분코딩
지식공유자

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

.foo {
    font-size: 10vw;
}

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

건우 김님의 프로필 이미지
건우 김
질문자

감사합니다, 선생님!

건우 김님의 프로필 이미지
건우 김

작성한 질문수

질문하기