여러 CSS 미디어 쿼리가 겹치면 어떻게 되나요?

미디어 쿼리 오버랩: Cascade Reigns Supreme

여러 미디어 쿼리가 동일한 뷰포트 크기와 일치하면 어떻게 되나요? 대답은 CSS의 핵심 원칙인 캐스케이드와 중첩 규칙에 있습니다.

캐스케이드 실행

@media 규칙은 일반 CSS 규칙과 마찬가지로 캐스케이드를 따릅니다. 여러 @media 규칙이 일치하면 일치하는 모든 스타일이 적용되고 계단식으로 충돌이 해결됩니다. 즉, 마지막으로 선언된 가장 구체적인 스타일 규칙이 적용됩니다.

중단점에서 중복

정확히 20em과 45em에서 첫 번째와 두 번째 미디어 쿼리 및 두 번째와 세 번째 미디어 쿼리가 각각 일치합니다. 브라우저는 그에 따라 규칙과 계단식 모두의 스타일을 적용합니다. 충돌하는 선언이 있는 경우 마지막에 선언된 규칙이 우선 적용됩니다.

구분 예시

다음 코드를 고려하세요.

@media (max-width: 20em) {
    .sidebar { display: none; }
}

@media (min-width: 20em) and (max-width: 45em) {
    .sidebar { display: block; float: left; }
}

20em 와이드이면 두 미디어 쿼리가 모두 일치합니다. 계단식 재정의는 display: none(display: block 및 float: left)을 .sidebar 클래스가 있는 요소에 적용합니다.

상호 배제로 겹침 방지

겹침을 방지하려면 , 미디어 쿼리가 상호 배타적인지 확인하세요. 최소 및 최대는 포괄성을 나타냅니다. (최소 너비: 20em) 및 (최대 너비: 20em)은 모두 20em 너비의 뷰포트와 일치합니다.

소수 픽셀 값

CSS의 픽셀 값은 논리 픽셀입니다. 뷰포트 너비에 대한 분수 픽셀 값을 보고하는 브라우저를 찾을 수 없습니다. iOS의 Safari는 뷰포트가 799.5px인 경우에도 (최대 너비: 799px) 또는 (최소 너비: 800px)이 하나 이상의 규칙과 일치하는지 확인하기 위해 분수 값을 반올림합니다.

위 내용은 여러 CSS 미디어 쿼리가 겹치면 어떻게 되나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!