CSS에서 @media 규칙 중첩: 브라우저 지원 및 호환성
질문:
방법 다양한 브라우저에서 @media 규칙 중첩이 일관되게 지원됩니까? 제공된 코드가 다양한 브라우저에서 다르게 표시되는 이유는 무엇이며 이러한 불일치의 원인은 무엇입니까? 일관된 스타일을 달성하기 위해 이 문제를 해결할 수 있습니까?
답변:
브라우저 지원
중첩 @media 규칙은 CSS2.1의 유효한 관행으로 인해 이 기능에 대한 지원이 브라우저마다 크게 다릅니다. 그러나 CSS 조건부 3이 도입되면서 @media 중첩 규칙은 Firefox, Safari, Chrome, Microsoft Edge를 포함한 모든 최신 브라우저에서 지원되는 기능이 되었습니다.
중첩 호환성
질문에 제공된 코드에는 @media 규칙 중첩이 포함됩니다. @media 규칙은 CSS3의 다른 @media 규칙 내에 중첩될 수 있지만 CSS2.1에서는 이러한 중첩이 허용되지 않습니다. 결과적으로 이전 버전의 Internet Explorer와 같이 여전히 CSS2.1을 준수하는 브라우저는 중첩된 @media 규칙을 올바르게 처리하지 못합니다.
불일치 이유
Firefox 최신 CSS 조건부 3 사양을 구현하여 중첩된 @media 규칙을 의도한 대로 해석하고 적용할 수 있습니다. 반면에 Opera, Chrome 및 IE9와 같은 다른 브라우저는 중첩된 @media 규칙을 지원하지 않는 이전 CSS2.1 사양을 따릅니다. 결과적으로 그들은 가장 안쪽 @media 규칙에 정의된 스타일을 다시 적용하게 되어 스타일 불일치가 발생하게 됩니다.
일관성 달성
전체에서 일관된 스타일을 보장하려면 모든 브라우저에서는 중첩된 @media 규칙을 제거하는 것이 좋습니다. 첫 번째 @media 규칙 내에서 두 번째 @media 규칙을 제거하면 됩니다.
@media screen and (min-width: 480px) { body { background-color: #6aa6cc; color: #000; } @media screen and (min-width: 768px) { // Remove this nested rule body { background-color: #000; color: #fff; } } }
중첩 규칙을 제거한 후 스타일은 CSS 조건부 3 및 CSS2를 지원하는 모든 최신 브라우저에 일관되게 적용되어야 합니다. 1.
위 내용은 CSS의 중첩된 @media 규칙에 대한 브라우저 지원은 얼마나 일관됩니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!