>웹 프론트엔드 >CSS 튜토리얼 >CSS 미디어 쿼리에서 여러 조건을 결합하기 위해 'OR' 논리를 어떻게 사용할 수 있습니까?

CSS 미디어 쿼리에서 여러 조건을 결합하기 위해 'OR' 논리를 어떻게 사용할 수 있습니까?

DDD
DDD원래의
2024-12-16 08:52:12665검색

How Can I Use

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이면 전체 미디어 문은 true를 반환합니다. 연산자."

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

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.