calc 폰트는 어떻게 계산해야하는거에요??
본문
외국 반응형 사이트들을 보면, 이런식으로 폰트 설정이 되어있던대. 어떻게 읽고? 계산?해야할지 모르겠어요.
body { font-size:16px; line-height:1.65; }
#content > a { font-size:calc(46px + 36 * ( (100vw - 576px) / 1024)) }
답변 1
말 그대로 사칙연산 해주시면 됩니다.
vw 는 viewport width라는 뜻으로 현재 브라우저 창의 너비입니다.
예를들어 브라우저 창의 사이즈가 1920픽셀이라면 100vw는 1920픽셀이 됩니다.
calc(46px + 36 * ( (100vw - 576px) / 1024) 은
46px + 36 * ( 1344px / 1024)
46px + 36 * (1.3125px)
46px + 47.25px
= 93.25px
#content > a 의 폰트사이즈는 93.25픽셀이 되는것입니다.
46px + 36 * ( (100vw - 576px) 뒤에 / 1024를 해주는 경우는 무엇일까요??
대체로 모든 사이트들이 통일한것마냥 1024란 숫자를 나누던데...
그 사이트 주소 남겨주시겠어요?
https://laufnature.com/
여기였습니다.
1024, 576 둘다 반응형 수치 입니다.
반응형시 비율 계산하려고 해놓은것 같은데 그 이상은 모르겠네요..
답변을 작성하시기 전에 로그인 해주세요.
