모든 브라우저는 CSS에서 중첩된 @media 규칙을 지원하며, 일관된 스타일을 어떻게 보장할 수 있습니까?

CSS의 @media 규칙 중첩: 브라우저 지원 및 일관성

CSS의 @media 규칙 중첩은 브라우저 지원과 관련하여 혼란의 대상이었습니다. . "어떤 브라우저가 이 기능을 지원하며 일관성을 어떻게 보장할 수 있습니까?"라는 질문이 생깁니다.

브라우저 지원

первоначально, @media 규칙 중첩은 지원되지 않았습니다. CSS2.1. 그러나 CSS3에서는 조건부 규칙 모듈에 설명된 대로 이 기능을 도입했습니다. 이제 최신 브라우저는 @media at-규칙의 중첩을 보편적으로 지원하며 Microsoft Edge는 유일한 예외입니다.

일관성

질문에 제공된 코드는 중첩된 @media를 보여줍니다. 규칙:

@media screen and (min-width: 480px) {

    body{
        background-color:#6aa6cc;
        color:#000;    
    }

    @media screen and (min-width: 768px) {

        body{
            background-color:#000;
            color:#fff;    
        }
    }
}

CSS3에서 이 코드는 의도한 대로 작동해야 하며, 지정된 미디어 쿼리. Firefox와 다른 브라우저 사이의 불일치는 Firefox가 CSS3 사양을 구현했기 때문에 발생하는 반면, 다른 브라우저는 여전히 중첩된 @media 규칙을 허용하지 않는 이전 CSS2.1 표준을 준수하고 있습니다.

해결 방법

모든 브라우저에서 일관성을 보장하려면 다음을 사용하는 것이 좋습니다. 접근 방식:

@media screen and (min-width: 480px) {
    body {
        background-color: #6aa6cc;
        color: #000;
    }
}

@media screen and (min-width: 768px) {
    body {
        background-color: #000;
        color: #fff;
    }
}

중첩을 제거하면 코드는 모든 주요 브라우저에서 CSS3가 완전히 구현될 때까지 모든 브라우저에서 일관되게 작동합니다.

위 내용은 모든 브라우저는 CSS에서 중첩된 @media 규칙을 지원하며, 일관된 스타일을 어떻게 보장할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!