CSS 미디어 쿼리가 상속 및 캐스케이드의 일반적인 규칙을 따르지 않는 이유는 무엇입니까?

Question

내 CSS3 미디어 쿼리 몇 가지 문제가 봤는데 ... 여기

나는 현재 하나의 작은 조각에 일하고 있어요 :

@media only screen 
and (max-width : 420px) { 
    .page { min-width: 300px; max-width: 480px; width: 100%; } 
    .page .alpha { font-size: 2em; } 

    /* Set-up the column */ 
    .page .column { margin: 0 auto 2%; width: auto; } 
    .page .gallery .column { min-height: 470px; height: auto; padding: 2%; } 
} 

/* Increase the main title for slightly larger screens! */ 
@media only screen 
and (max-width : 480px) { 
    .page .alpha { font-size: 3em; } 
} 

나는 '모바일 처음부터 일하고 있어요 '관점 및'계단식 '측면에 관한 CSS의 정상적인 동작을 감안할 때 두 번째 @media 문은 이전 문에서 모든 스타일을 상속받으며 일치하는 또는'무거운 '선택기가있는 모든 문을 재정의하는 것이 좋습니다.

(플러스 CSS의 !important 문 '날조'를 제외하고 마지막으로 정의 된 규칙 세트를 사용하는 것이 일치하는 스타일 정의를 의미 할 것입니다! 우선 순위) 그래도 난 무엇을 본 적이에서

을 테스트를 통해 일부 Google/SE는 이것이 사실이 아니라고 판단합니다.

@media 스타일 규칙을 적용 가능한 이전 명령문에서 상속 할 수 있습니까? 아니면 각 명령문에 필요한 모든 규칙을 반복해야합니까? (그다지 DRY)

정말 이에 대한 도움과 설명/설명을 보내 주시면 감사하겠습니다.

Answer 1

감사합니다. @BoltClock (두 가지 설명 모두) 및 다른 의견 및 모든 도움에 대한 답변입니다.

내 미디어 쿼리에서 실수를 저질렀거나 어떻게 작동하고 상호 작용했는지 이해하지 못한 것 같습니다. 내 질문을 다음과 같이 편집하려고했으나 대답으로 더 이해할 수 있다고 판단했습니다. 이것이 다른 사람의 시간을 낭비한다면 사과드립니다. 나는 다음 둥지 중 하나 또는 내가 할 수있는 필요한 범위/제한을 충당하기 위해 내 첫 번째 블록에 최대 폭 증가하면 당신의 코멘트를 실현

@media only screen 
and (max-width : 480px) { 
    .page { min-width: 300px; max-width: 480px; width: 100%; } 
    .page .alpha { font-size: 2em; } 

    /* Set-up the column */ 
    .page .column { margin: 0 auto 2%; width: auto; } 
    .page .gallery .column { min-height: 470px; height: auto; padding: 2%; } 
} 
/* Increase the main title for slightly larger screens! */ 
@media only screen 
and (min-width : 421px) 
and (max-width : 480px) { 
    .page .alpha { font-size: 3em; } 
} 

:

여기에 코드를 내 고정 조각입니다 그 다음에 두 번째 블록을 추가하십시오. (둘 다 시도해 보았습니다. 크롬 브라우저 [18.0.1025.151]를 사용하여 둘 다 저에게 효과적이었습니다). 이것은 page .alpha 요소의 글꼴 크기가 필요한 스테핑/간격으로 증가한다는 점에서 성공적으로 나에게 원하는 결과를주었습니다.

도움을 주신 모든 담당자 들께 다시 한 번 감사드립니다! (그리고 SE에 멋진 지역 사회가 도왔 빌드)

지식> OpenSource 다음> 자유 참고하시기 바랍니다

Answer 2

모바일에서 작업하려면 모바일 레이아웃을 기본 레이아웃으로 설정해야합니다. (쿼리 삭제). 여기에서 쿼리는 위에서 상속 받게됩니다.

.page { min-width: 300px; max-width: 480px; width: 100%; } 
.page .alpha { font-size: 2em; } 

/* Set-up the column */ 
.page .column { margin: 0 auto 2%; width: auto; } 
.page .gallery .column { min-height: 470px; height: auto; padding: 2%; } 

/* Increase the main title for slightly larger screens! */ 
@media only screen 
and (max-width : 480px) { 
    .page .alpha { font-size: 3em; } 
}