브라우저 clamp()
-
css clamp를 사용해보자CSS 2021. 10. 25. 23:37
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이 될 것입니다. 브라우저 지원이 아직 미비하지만..