반응형은 조금의 여백 즉 10 ~ 20 정도의 패딩 이나 마진 일 경우는 px 로 하고 전체적인 레이아웃 요소들은 % 로 합니다. 예를들면.. 가로 3 한묶음 div 요소들은 width:33.3% 에 display:inline-block; 으로 정렬되고 가로 4 한묶음이면 width:25% 로 합니다. 가로 100% 를 나누어서 계산하면 됩니다. 폰트는 rem 으로 쓰면 반응형에 좋구요. * {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