[HTML] 반응형 웹 (Responsive) 처리

head태그 안에,

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

미디어쿼리(media query)

@media screen and (max-width : 1200px) { 
  .box { 
    font-size : 40px; 
  } 
} 

@media screen and (max-width : 768px) { 
  .box { 
    font-size : 30px; 
  } 
}

media query를 작성할 때는 CSS파일 최하단에 작성한다

이유: css파일도 한줄씩 읽고 적용되므로 중복된 스타일조정은 캐스케이딩 되서 중복되더라도 가장 마지막 줄을 읽고 그걸로 수정해줌

 

 

권장되는 Breakpoint

media query 문법에서 max-width안에 넣는 브라우저 폭을 breakpoint라고 한다

breakpoint는 원하는 만큼 여러개 넣을 수 있지만 권장되는 폭의 경우의 수는 대략 4개정도 쓴다(일반적으로)

 

1200px / 992px / 768px / 576px - Bootstrap library가 기본으로 권장하는 Breakpoint

 

1200px 이하는 tablet
768px 이하는 mobile