CSS - 미디어 쿼리

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

 

/* width under 576px */
@media (max-width: 575px){
	body{ background-color: white; }
}

/* Mobile */
@media (min-width: 576px) and (max-width: 767px){
	body{ background-color: red; }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px){
	body{ background-color: green; }
}

/* Desktop */
@media (min-width: 992px) and (max-width: 1199px){
	body{ background-color: blue; }
}

/* width over 1200px */
@media (min-width: 1200px){
	body{ background-color: orange; }
}

 

 

참고: 

https://fromnowwon.tistory.com/entry/%EB%B0%98%EC%9D%91%ED%98%95-%EB%AA%A8%EB%B0%94%EC%9D%BC-%ED%8D%BC%EC%8A%A4%ED%8A%B8-css

[반응형웹] 모바일 퍼스트 CSS 작성하기 / 데스크탑 퍼스트