다른 사람들과 공유하고 싶은 CSS 팁은 무엇입니까?

CSS의 세계는 매우 거칠습니다. 순서를 정하는 것들을 공유하여 서로를 도웁시다!

시작하겠습니다!

유동적인 타이포그래피를 사용하여 글꼴 크기를 동적으로 변경하기 위해 미디어 쿼리를 버릴 수 있습니다. min , max 및 viewport units 를 사용하여 font-size를 동적으로 변경하고 폭발(또는 축소)하지 않도록 제한할 수 있습니다.

예를 들어 보겠습니다. 헤더가 모바일에서는 2rem이고 더 큰 디스플레이에서는 4rem이 되기를 원한다고 가정해 보겠습니다. 이를 달성하기 위해 유체 타이포그래피를 사용하는 방법은 다음과 같습니다.

h1 {
    // font-size: min(max({MIN_SIZE}, 4vw), {MAX_SIZE});
    font-size: min(max(2rem, 4vw), 4rem);
}

대부분의 경우 1rem = 16px이므로 최소 글꼴 크기는 32px입니다. 즉, 뷰포트 너비가 800px(0.04 * 800px = 32px)보다 작을 때 글꼴 크기는 항상 32px입니다. 이것은 모바일에 적합합니다. 뷰포트 너비가 800px보다 크면 글꼴 크기가 뷰포트와 함께 동적으로 변경되지만 4rem = 64px를 초과하지 않습니다.
4vw는 예시로 사용되었습니다. 필요에 맞는 값으로 변경할 수 있습니다.

이 동작을 확인하려면 아래 펜의 표시 영역 너비를 변경해 보십시오. 글꼴 크기 증가를 더 빠르게(글꼴 크기 가속?!) 만들기 위해 4vw를 8vw로 변경했습니다.



그리고 그게 다야! 단 한 줄의 코드로 글꼴 크기를 반응형으로 만들 수 있습니다!

이 간단한 트릭이 여러분에게 도움이 되기를 바랍니다.
아래에서 다른 멋진 팁을 공유하세요! 🎉