반응형 가변형 px값 %계산
본문
반응형 px값 %계산 어떻게 하는건가요?
답변 1
반응형은 조금의 여백 즉 10 ~ 20 정도의 padding 이나 margin 일 경우는 px 로 하고
전체적인 레이아웃 요소들은 % 로 합니다.
가로 3 덩어리 div 요소들은 width:33.3% 에 display:inline-block; 으로 정렬되고
가로 4 덩어리면 width:25% 로 합니다.
가로 100% 를 나누어서 계산하면 됩니다.
폰트는 rem 으로 쓰면 반응형에 효과가 좋습니다.
html {font-size:15px;} 요소에 이렇게 폰트 사이즈 고정 px 을 주고
후에 폰트 사이즈들은 font-size:1rem 으로 하게 되면 기기에서 실사이즈는 15px 로 반응합니다.
반응형에서 폰트사이즈 단위가 왜 중요한걸까요??
폰트사이즈를 px로 하게 되면 가령 20px 로 했으면 모바일에서 보면 엄청나게 크게 보이죠?
그럼 또 미디어쿼리를 써서 폰트 사이즈 따로 조정 해야 합니다.
이 때!! rem 으로 한다면? 계산은 어떻게 하느냐..최상단인 html 요소에 15px 을 줬다고치고
폰트사이즈를 2rem 이면 실제 사이즈는 x2가 됩니다. 30px 인 셈이죠.
rem 단위는 최상단 html 요소에 px로 정의된 사이즈에 의해 조절 됩니다.!
pc 에서 font-size:2rem 으로 작업을 해놓으면 pc 에서는 30px 로 보이지지만 해상도가 줄어들수록
자동으로 반응해서 점차 줄어들어서 모바일에서 볼땐 폰트 사이즈가 15px 이 되는 효과 입니다.
정리하자면! 모바일에서 최적화로 보이는 폰트사이즈 즉 14px 이나 15px 을 최상단에 정의해놓고
그 후에 폰트사이즈는 rem 으로 하세요.
계산은 html 요소에 예를들어 정의된 15px 사이즈에 rem 수치를 곱하면 됩니다.
1rem = 15px x 1 = 실제사이즈는15px
2rem = 15px x 2 = 실제사이즈는 30px
3rem = 15px x 3 = 실제사이즈 45px
