[CSS] 반응형 CSS 단위 em, rem

참고

• https://www.youtube.com/watch?v=xWMKz9NCD0k

사용 용도를 나누는 기준

1. 부모 요소의 사이즈에 따르는가 ? 브라우저의 사이즈에 반응하는가?

• 부모 요소의 사이즈에 따르겠습니다: %, em
• 브라우저의 사이즈에 반응할래요: v*(vw, vh, vmin, vmax), rem

2. 요소의 너비와 높이에 따라서 사이즈가 변경되는가? font사이즈에 따라서 사이즈가 변경되는가?

• 요소의 너비와 높이에 따라서 변경될래요: %, v*, flex
• font 사이즈에 따를래요: em, rem

em vs rem

em과 rem, 둘 중에 꼭 한 가지만 골라서 사용하기보다는 개발자가 어떤 컴포넌트를 어떻게 디자인하냐에 따라서 적절하게 필요한 것을 사용하는 게 중요하다.

그래도 주로 사용하는 것

• rem: font-size

• em: padding

• media query에도 rem을 사용하면 좋다.

@media screen and (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

@media screen and (max-width: 48rem) {
  .container {
    flex-direction: column;
  }
}

Reference

• http://pxtoem.com/