CSS 미디어 쿼리에서 'OR' 논리를 어떻게 사용합니까?

CSS 미디어 쿼리에서 OR 논리 사용

미디어 쿼리를 정의할 때 "OR" 논리를 사용하여 여러 조건을 지정하는 방법을 아는 것이 중요합니다. . 뷰포트의 최대 너비 또는 최대 높이가 특정 기준을 충족할 때 적용되는 스타일 규칙을 정의한다고 가정해 보겠습니다.

안타깝게도 CSS 미디어 쿼리에서는 "OR" 키워드를 사용할 수 없습니다. 대신 올바른 구문은 각 조건을 쉼표로 구분하는 것입니다.

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

쉼표를 사용하면 미디어 쿼리는 최대 너비가 995px 이하인 모든 뷰포트에 적용됩니다. max-height는 700px보다 작거나 같습니다.

이 동작은 "AND"(&&)와 "OR"의 근본적인 차이로 인해 발생합니다. (||) CSS 미디어 쿼리의 논리 연산자입니다. "AND" 연산자는 두 조건이 모두 참이어야 하는 반면, 쉼표(",") 연산자는 "OR" 연산을 나타내며, 여기서 두 조건 중 하나라도 참이면 충분합니다.

미디어 쿼리를 작성할 때 이러한 차이점을 이해하는 것은 다양한 장치 뷰포트 특성을 기반으로 원하는 스타일을 얻는 데 매우 중요합니다.

위 내용은 CSS 미디어 쿼리에서 'OR' 논리를 어떻게 사용합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!