Min-Width 미디어 쿼리를 올바르게 계단식으로 만들려면 어떻게 해야 합니까?

최소 너비 미디어 쿼리로 CSS 특정성

웹사이트를 디자인할 때 다음을 포함한 반응형 웹 디자인 원칙을 사용하는 것이 일반적입니다. 모바일 우선 접근 방식. 이를 위해서는 특정 화면 크기의 대상 장치에 대한 최소 너비 미디어 쿼리를 사용해야 합니다. 그러나 더 낮은 최소 너비가 우선 적용되는 것처럼 보이므로 높은 화면 해상도에서 CSS 값을 덮어쓰면 혼란스러울 수 있습니다.

미디어 쿼리는 제한이 가장 적은 것부터 가장 제한적인 것 순으로 평가되기 때문입니다. 제공된 예에서:

@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입니다. 그러나 두 번째 규칙은 캐스케이드 후반에 발생하므로 우선 적용되며 더 작은 1.7em 글꼴 크기가 적용됩니다.

해결 방법

상위 선언을 효과적으로 덮어쓰려면 더 강력한 선택기나 최대 너비를 사용하지 않고 최소 너비를 사용하는 해상도를 사용하면 미디어 쿼리의 순서를 전환할 수 있습니다.

@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; }
}

이렇게 하면 화면 너비가 최소일 때 더 큰 글꼴 크기가 적용됩니다. 600px. 이렇게 하면 더 높은 최소 너비가 우선 적용되면서 기대하는 계단식 특이성을 얻을 수 있습니다.

위 내용은 Min-Width 미디어 쿼리를 올바르게 계단식으로 만들려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!