responsive_rem - nonownonow/queen-ant-app GitHub Wiki

/*모바일 디자인 파일(PSD) 사이즈 = 640px 경우*/
html {
  /* 10/640*100 = 1.5625 */
  font-size: 1.5625vmin (또는 vw)
}

/* PC디자인 파일(PSD) 사이즈 = 1280px 경우 */
@media (min-width: 1280px) {
  html {
    /*무한으로 커지지 않도록 10px로 고정시키기*/
    font-size: 10px;
  }
}

/* TABLET PC 사이즈 = 960px 경우 자연스러운 반응형 진행을 위해*/
@media (min-width: 960px) {
  html {
    font-size: calc(1.5625vw - 10px);
  }
}
  1. 상대 단위 폰트란?
  • 단위가 외부 요소에 의존되어서 변하는 폰트 단위
    • viewport unit = 반응형 단위
      • vw, vh
    • root-font unit
      • rem
  1. 반응형 REM 기법이란?
  • root font에 vw를 사용하고, 모든 요소의 단위를 rem으로 작성
  • 프로젝트 요구 상황에 따라 vw대신 vmin을 적용한다.
  • 반응형REM의 반응성은 media쿼리를 통해 root font를 수정하면서 조정
  1. 반응형 페이지 제작 방법
  • 디자인 파일에서 px단위를 참조하여 rem단위로 변환 작성
  • 특정 조건에서 px단위를 rem단위로 쉽게 변환할 수 있음
특정 조건

html {
  /* (10/640)*100 = 1.5625 */
  font-size: 1.5625vw
}
  • 반응형 REM의 계산된 결과
    • 1rem = 10px
  • 특정 요소는 고정단위를 사용해야 한다.
    • ex 선, 굴곡 등
  1. 참고 https://www.madebymike.com.au/writing/precise-control-responsive-typography/