반응형 미디어쿼리

viewport

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

모바일 퍼스트 (min-width)

/* 기본: <576px */
@media (min-width: 576px) { /* 모바일 가로 */ }
@media (min-width: 768px) { /* 태블릿 */ }
@media (min-width: 992px) { /* 데스크탑 */ }
@media (min-width: 1200px) { /* 큰 화면 */ }

데스크탑 퍼스트 (max-width)

@media (max-width: 575px) { }
@media (max-width: 767px) { }
@media (max-width: 991px) { }
@media (max-width: 1199px) { }
/* 기본: >=1200px */

범위 지정

@media (max-width: 575px) { }
@media (min-width: 576px) and (max-width: 767px) { }
@media (min-width: 768px) and (max-width: 991px) { }
@media (min-width: 992px) and (max-width: 1199px) { }
@media (min-width: 1200px) { }

Breakpoints: Bootstrap 기준.