반응형 rem 미세팁

웹 접근성과 반응형을 위해 마진, 패딩등의 단위로 rem을 많이 사용한다.

rem은 html의 font-size 기준으로 기본 font-size는 16px이다.

그래서 계산이 조금 어려운데, 다음과 같이 수정해주면 계산을 쉽게 할 수 있다.

html {
  font-size: 10px;
}

html의 font-size가 10px이 되기 때문에 계산을 좀 더 편하게 할 수 있다.

하지만 이렇게 고정값을 줄 경우 브라우저에서 font-size 관련 설정을 larger 등으로 바꾸어뒀을 경우에도 고정되는 문제가 생긴다.

html {
  font-size: 62.5%;
}
/* 16*0.625===10 */

다음과 같이 작성해주면 브라우저의 larger 설정으로 font-size가 20이 되더라도 그걸 반영하여 적용되게 된다.