미디어 쿼리가 가장 제한적으로 가장 제한적으로 평가되기 때문입니다. 제공된 예에서 :

@미디어 전용 화면 및 (min-width : 600px) { H2 {font-size : 2.2em; } } @Media 전용 화면 및 (Min-Width : 320px) { h2 {font : 정상 1.7em/2.1em helvetica, sans-serif; } }

화면 너비가 600px 이상인 경우 두 미디어 쿼리가 모두 참입니다. However, the second rule occurs later in the cascade, so it takes precedence and the smaller 1.7em font size is applied.

Resolution

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

To effectively overwrite declarations in higher resolutions using min-widths without resorting to stronger selectors or max-width, you can switch the order of your media 쿼리 :

@미디어 전용 화면 및 (min-width : 320px) { h2 {font : 정상 1.7em/2.1em helvetica, sans-serif; } } @Media 전용 화면 및 (Min-Width : 600px) { H2 {font-size : 2.2em; } }

화면 너비가 600px 이상 일 때 더 큰 글꼴 크기가 적용되도록합니다. 이것은 당신이 기대하는 계단식 특이성을 줄 것입니다.