@Media 및 @Support 쿼리를 중첩 할 수 있습니까?

예, CSS @media 및 @supports Queries를 중첩 할 수 있으며 중첩 순서는 기능에 영향을 미치지 않습니다. CSS 전 처리기가 필요하지 않습니다. 표준 CSS는 이것을 처리합니다.

이 예제는 유효한 중첩 사용을 보여줍니다.

 @Supports (-A : B) {
  @Media (min-width : 1px) {
    몸 {
      배경 : 빨간색;
    }
  }
}

중첩 순서를 되돌리는 것도 효과가 있습니다.

 @Media (min-width : 1px) {
  @Supports (-A : B) {
    몸 {
      배경 : 녹색;
    }
  }
}

논리가 복잡해질 수 있지만 더 중첩이 가능합니다.

 @Media (min-width : 2px) {
  @Media (min-width : 1px) {
    @Supports (-a : b) {
      @supports (display : flex) {
        몸 {
          배경 : 분홍색;
        }
      }
    }
  }
}

깊게 중첩 된 구조가 가능하지만 과도한 중첩은 가독성을 줄일 수 있습니다. 그러나 표준 CSS 파서는 문제없이이를 처리합니다. CSS 전 처리기 (Sass, Less, Stylus 테스트)는 중첩 구조를 수정하지 않습니다.

위 내용은 @Media 및 @Support 쿼리를 중첩 할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!