미디어 쿼리가 미디어 쿼리가 아닌 미디어 쿼리를 대체합니까?

Question

다음을 사용할 경우 위의 450px에 대한 미디어 쿼리를 명시 적으로 지정해야합니까?

//target above 450px 
.classA {color:#fff;} 
#elementB {display:block;} 

//target 450px and below 
@media (max-width:450px){ 
.classA {color:#000;} 
#elementB {display:none;} 
} 

이 방법을 사용하는 것이 좋습니다.

Answer 1

첫 번째 질문에 먼저 대답하십시오. 아니요, 대상으로하는 미디어 쿼리를 구체적으로 지정하지 않아도됩니다. above 450px. 지금 설정 한 방식대로 모든 너비의 미디어 쿼리 외부에있는 내용을 사용하며 너비가 450px 이하이면 미디어 쿼리의 내용 만 사용합니다. 이렇게 보면 괜찮습니다. 결과는 당신입니다.

두 번째 질문에 답하면 실제로 미디어 쿼리를 많이 사용하지 않았으므로 "우수 사례"라고 말하는 것은 받아들이지 말고 CSS 스 니펫을 살펴보십시오. 나는 그것이 현재 잘 작동하는 유일한 이유는 당신이 미디어 쿼리와 클래스를 그 안에 위치 시켰기 때문이라고 생각한다. 뒤에는 스타일 시트의 "일반 클래스"가있다. 미디어 쿼리 내부의 클래스 다음에 "일반 클래스"를 배치했다면 항상은 미디어 쿼리를 덮어 쓰지 않는 한 미디어 쿼리를 덮어 쓰지 않는 것이 좋습니다. above 450px 너비