CSS 반응형 단위

요즘에는 mobile, tablet desktop 단위가 모호 하지만
width 값을 나누자면
mobile : 320px ~ 480px
tablet : 768px ~ 1024px
desktop : 1024px ~

기본적으로 브라우저에서 html에 할당 되는 폰트 사이즈 16px

절대적인 값

• px(픽셀) 사용
  ㄴ 컨테이너 사이즈가 변경되어도 고정된 값으로 유지됨

상대적인 값
ㄴ 값을 반응형으로 하는 것이 좋음

• %
  바로 위 부모 요소 의 상대적으로 크기가 계산이 됨
• em
  바로 위 부모의 font-size의 영향을 받아서 결정이 됨
  1em === 16px
  px의 경우 폰트패밀리에 따라 다른 사이즈가 보일 수 있지만 em은 폰트패밀리와 전혀 상관없이
  항상 고정된 폰트 사이즈를 가지고 있습니다.

  <div>
  	<h1>hello</h1> 2em => 32px
      <div>
  		<h1>hello</h1> 2em => 64px
          <div>
  			<h1>hello</h1> 2em => 128px
  		</div>
  	</div>
  </div>

• rem
  em은 부모에 영향을 받지만 rem은 root에 지정된 폰트 사이즈에 따라서 결정이 됨
• vw
  viewport의 넓이, 100vw => viewport의 100%를 사용
• vh
  viewport의 높이, 100vh => viewport의 100%를 사용