테스트 사이트 - 개발 중인 베타 버전입니다

calc 폰트는 어떻게 계산해야하는거에요?? 채택완료

myfree 2년 전 조회 2,270

외국 반응형 사이트들을 보면, 이런식으로 폰트 설정이 되어있던대. 어떻게 읽고? 계산?해야할지 모르겠어요. 

 

</p>

<p>body { font-size:16px; line-height:1.65; }</p>

<p>#content > a { font-size:calc(46px + 36 * ( (100vw - 576px) / 1024)) }</p>

<p>

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트

말 그대로 사칙연산 해주시면 됩니다.

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픽셀이 되는것입니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 4개

m
myfree
2년 전
46px + 36 * ( (100vw - 576px) 뒤에 / 1024를 해주는 경우는 무엇일까요??
대체로 모든 사이트들이 통일한것마냥 1024란 숫자를 나누던데...
N
NDWEB
2년 전
그 사이트 주소 남겨주시겠어요?
m
myfree
2년 전
https://laufnature.com/
여기였습니다.
N
NDWEB
2년 전
1024, 576 둘다 반응형 수치 입니다.

반응형시 비율 계산하려고 해놓은것 같은데 그 이상은 모르겠네요..

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인