왜 낮은 최소 너비 미디어 쿼리가 높은 미디어 쿼리보다 우선합니까?

다음 예를 고려하세요.

해상도가 600px 이상인 경우 ,

의 글꼴 크기가 예상됩니다. 요소는 2.2em이어야 합니다. 그러나 출력에는 대신 1.7em이 표시됩니다. 개발자 도구에 2.2em 선언이 나타나더라도 낮은 최소 너비 쿼리의 1.7em 설정으로 재정의됩니다.

미디어 쿼리의 우선 순위 이해

@media only screen and (min-width: 600px) {
    h2 { font-size: 2.2em; }
}

@media only screen and (min-width: 320px) {
    h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; }
}

이 동작은 미디어 쿼리가 평가되는 방식으로 인해 발생합니다. 여러 미디어 쿼리가 요소에 적용되는 경우 계단식 순서에서 마지막에 발생하는 규칙이 우선 적용됩니다. 이 경우 600px 이상의 해상도에 대해 두 미디어 쿼리가 모두 true로 평가되므로 후자의 쿼리가 전자를 재정의합니다.

문제 해결

이를 해결하려면, 규칙이 의도한 순서대로 계단식으로 배열되도록 미디어 쿼리 블록을 재정렬합니다.

더 낮은 블록을 배치하여 최소 너비 쿼리를 먼저 실행하면 이제 2.2em 글꼴 크기가 600px 이상의 해상도에 적용됩니다.

결론

@media only screen and (min-width: 320px) {
    h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; }
}

@media only screen and (min-width: 600px) {
    h2 { font-size: 2.2em; }
}

CSS 특수성과 계단식 순서 이해 효과적인 반응형 디자인을 위해서는 미디어 쿼리가 필수적입니다. 미디어 쿼리의 순서를 신중하게 고려하면 코드가 의도한 대로 작동하고 다양한 화면 크기에서 원하는 시각적 출력을 얻을 수 있습니다.

위 내용은 왜 낮은 최소 너비 미디어 쿼리가 높은 미디어 쿼리보다 우선합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!