CSS 미디어 쿼리 : 최대 너비 또는 최대 높이

질문 : CSS 미디어 쿼리 : 최대 너비 또는 최대 높이

---

CSS 미디어 쿼리를 작성할 때 "OR"논리로 여러 조건을 지정할 수있는 방법이 있습니까?

나는 다음과 같은 것을 시도하고 있습니다.

/* This doesn't work */
@media screen and (max-width: 995px OR max-height: 700px) {
  ...
}

답변

---

쉼표를 사용하여 두 개 이상의 다른 규칙을 지정하십시오.

@media screen and (max-width: 995px), 
       screen and (max-height: 700px) {
  ...
}

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries에서

쉼표는 여러 미디어 쿼리를 단일 규칙으로 결합하는 데 사용됩니다. 쉼표로 구분 된 목록의 각 쿼리는 다른 쿼리와 별도로 처리됩니다. 따라서 목록의 쿼리 중 하나라도 참이면 전체 미디어 문이 참을 반환합니다. 즉, 목록은 논리 또는 연산자처럼 작동합니다.

 

출처 : https://stackoverflow.com/questions/11404744/css-media-queries-max-width-or-max-height