한 가지 예를 더 볼까요?

@media only all and (min-width:360px) {
  /* CSS 코드 */
}

미디어 쿼리를 적용할 수 있는 기기(only)이면서 모든 기기(all)를 대상으로 하며 최소 너비가 360px이면 CSS 코드가 실행됩니다. 여기서도 only와 미디어 타입은 생략할 수 있습니다.

미디어 쿼리를 화면에 적용해 보겠습니다. div 태그의 너비와 높이를 100px로, 배경색을 빨간색으로 지정합니다. 그리고 컴퓨터 화면 장치 또는 스마트 기기이면서 뷰포트의 최소 너비가 420px이면 배경색을 파란색으로 바꾸도록 미디어 쿼리를 설정합니다.

div{
  width:100px;
  height:100px;
  background-color:red;
}
@media only screen and (min-width:420px){
  div{
    background-color:blue;
  }
}