(CSS) 반응형 디자인 미디어 쿼리

미디어 쿼리 

미디어 쿼리는 화면 해상도, 기기 방향 등의 조건으로 HTML에 적용하는 스타일을 전환할 수 있는 CSS3의 속성중 하나입니다. 
반응형 웹 디자인에서는 미디어 쿼리를 사용해 적용하는 스타일을 기기마다(화면 크기마다) 전환 할 수 있습니다.

 

 

* 조건이 만족 될 때 스타일 적용하기 

 

@media (조건) {

   스타일 

} 

 

 

@media (max-width: 1000px) {
	.video-grid {
      grid-template-columns: 1fr 1fr 1fr 1fr;
      }
}

 

 

@media (max-width: 751px) and (max-width : 999px) {
	.video-grid {
      grid-template-columns: 1fr 1fr 1fr;
      }
}

@media (max-width: 750px) {
	.video-grid {
      grid-template-columns: 1fr 1fr;
      }
}