외국 반응형 사이트들을 보면, 이런식으로 폰트 설정이 되어있던대. 어떻게 읽고? 계산?해야할지 모르겠어요. [code] body { font-size:16px; line-height:1.65; } #content > a { font-size:calc(46px + 36 * ( (100vw - 576px) / 1024)) } [/code]

이전 목록 다음

채택완료

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

myfree

2023-04-11 (화) 09:30:29 2,810

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

Copy

body { font-size:16px; line-height:1.65; }

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

html5 css

채택된 답변

+20 포인트

조나단입니다

2023-04-11 (화) 09:37:19

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

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

myfree

2023-04-11 (화) 09:50:29

46px + 36 * ( (100vw - 576px) 뒤에 / 1024를 해주는 경우는 무엇일까요??
대체로 모든 사이트들이 통일한것마냥 1024란 숫자를 나누던데...

NDWEB

2023-04-11 (화) 10:38:51

그 사이트 주소 남겨주시겠어요?

myfree

2023-04-11 (화) 11:18:51

https://laufnature.com/
여기였습니다.

NDWEB

2023-04-11 (화) 11:39:32

1024, 576 둘다 반응형 수치 입니다.

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

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