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);
}
}
- 상대 단위 폰트란?
- 단위가 외부 요소에 의존되어서 변하는 폰트 단위
- viewport unit = 반응형 단위
- root-font unit
- 반응형 REM 기법이란?
- root font에 vw를 사용하고, 모든 요소의 단위를 rem으로 작성
- 프로젝트 요구 상황에 따라 vw대신 vmin을 적용한다.
- 반응형REM의 반응성은 media쿼리를 통해 root font를 수정하면서 조정
- 반응형 페이지 제작 방법
- 디자인 파일에서 px단위를 참조하여 rem단위로 변환 작성
- 특정 조건에서 px단위를 rem단위로 쉽게 변환할 수 있음
특정 조건
html {
/* (10/640)*100 = 1.5625 */
font-size: 1.5625vw
}
- 반응형 REM의 계산된 결과
- 특정 요소는 고정단위를 사용해야 한다.
- 참고 https://www.madebymike.com.au/writing/precise-control-responsive-typography/