미디어 쿼리에서 `min-width`를 사용할 때 CSS 규칙이 올바르게 적용되도록 하려면 어떻게 해야 합니까?

CSS 특이성, 미디어 쿼리 및 최소 너비 이해

"모바일 우선" 접근 방식을 사용하여 반응형 웹 디자인을 구현할 때 최소 너비는 너비를 사용하면 디자이너가 장치 너비를 기반으로 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 이상의 해상도는 2.2em의 h2 글꼴 크기를 표시해야 합니다. 그러나 1.7em 선언이 우선합니다.

해결책

미디어 쿼리는 가장 구체적인 규칙이 덜 구체적인 규칙을 재정의하는 특이성 계층 구조에서 작동합니다. 위의 예에서 첫 번째 미디어 쿼리는 더 높은 최소 너비를 지정하기 때문에 더 구체적입니다.

올바른 접근 방식은 글꼴 크기를 2.2em으로 설정하는 더 구체적인 규칙이 되도록 미디어 쿼리의 순서를 바꾸는 것입니다. , 마지막에 나타납니다:

@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 이상의 해상도에 대해 원하는 CSS 규칙이 적용됩니다.

위 내용은 미디어 쿼리에서 `min-width`를 사용할 때 CSS 규칙이 올바르게 적용되도록 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!