css clamp를 사용해보자

clamp()는 ie를 지원하지 않습니다.

저희가 ie와 작별할 시간도 머지 않았습니다.

 

font-size를 반응형으로 잡을 때 유동적으로 작용할 수 있도록 도와줍니다

그리고 최소 사이즈 및 최대 사이즈도 정할 수 있지요.

 

 

사용법은 다음과 같습니다.

h1 {
  font-size: clamp(16px, 5vw, 34px);
}

/** 
 * 16px - 최소사이즈 
 * 5vw - 기준점
 * 34px - 최대사이즈
 */

뷰포트 너비의 5%인 font-size가 되는데 16px부터 34px 사이의 사이즈에서만 적용됩니다.

예를 들어 뷰포트 너비가 300px인 경우 5vw 값은 15px와 같습니다. 

그러나 해당 font-size 값을 최소 16px로 고정했으므로 16px이 될 것입니다.

 

브라우저 지원이 아직 미비하지만 @support 속성이 있으므로 현재도 이렇게는 사용할 수 있습니다.

@supports (font-size: clamp(16px, 5vw, 34px)) {
  h1 {
    font-size: clamp(16px, 5vw, 34px);
  }
}

 

 

브라우저 지원이 조금 아쉽지만 곧 아주 자주 사용하게 될 것 같은 속성입니다!

 

감사합니다.

 

 

출처 : https://dev.to/vtrpldn/write-fewer-media-queries-with-the-clamp-css-function-2cl7?fbclid=IwAR3iQvH8X0sQmoM1zLkSEQiDQhSqnxNdstkP_-JWU-Gc6fn-2b0fPzzoMAM