반응형 CSS 어떤걸 사용할까 ?

1. 부모요소에 사이즈가 반응한다면? (페이지 어디에서 사용되느냐에 따라 사이즈가 변경되야 한다면)

   👉 %, em

 

 

2. 부모요소가 아닌 Browser 사이즈에 반응한다면? (페이지 어디에서 사용되어져도  사이즈가 고정되야 한다면)

   👉 v*,  rem

 

박스 사이즈를 결정한다면?  👉 %, v*
Font-size에 비례해서 변경 👉 em, rem

---

이렇게 사용해보자 !!

 

1. Font-size는 rem

(em은 상위 부모때메 복잡할 수 있음)

 

2. Margin,padding은 위아래 em, 좌우정렬 rem

(폰트 사이즈 변경에 따라)

 

3. width는 %

 

 

---

// 예시

@media screen and (max-width: 48rem)

.first-component {
  padding: 0.5em;  // 부모 font-size의 0.5배
}

.second-component {
  font-size: 2rem;
  padding: 0.5em;  // 2rem * 0.5 = 16px
}

 

 

PXtoEM.com 사이트에 px값을 EM으로 변경해 볼 수 있으니 참고하면 좋을 것 같다 😁