OR 논리를 사용하여 CSS 미디어 쿼리의 여러 조건 결합

CSS 미디어 쿼리에서 "OR" 논리를 사용하여 여러 조건을 지정하는 것이 유용할 수 있습니다. 다양한 화면 크기나 측면을 가진 장치를 타겟팅합니다. 질문에 제공된 코드가 올바르지 않지만 원하는 결과를 얻을 수 있는 간단한 방법이 있습니다.

"OR" 논리로 여러 조건을 지정하려면 쉼표로 구분하세요.

@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의 문서에 설명된 대로:

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

이 접근 방식을 사용하면 미디어 쿼리는 화면 너비가 995픽셀보다 작거나 같은지 또는 화면 높이가 더 작은지 확인합니다. 700픽셀 이상입니다. 두 조건 중 하나가 충족되면 미디어 쿼리에 지정된 스타일이 적용됩니다.