반응형 미디어 쿼리 사용

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

@media (조건){
  스타일
}

e.g)
@media(min-width: 1000px)최소 너비가 1000px 보다 클 때 {
  .video-grid {
		grid-template-columns: 1fr 1fr 1fr 1fr
	}
}

@media(min-width: 1000px) and (max-width: 999px) 최대 너비가 999px 보다 작을 때 {
  .video-grid {
		grid-template-columns: 1fr 1fr 1fr 1fr
	}
}
  

폰트는 em보다 rem 사용 권장