css 미디어 쿼리 - 구현하기에 좋지 않은 방법입니까?

Question

최근에 미디어 쿼리를 사용하는 방법에 대한 질문과 함께 지원하지 않는 이전 브라우저의 대체 기능을 지원하는 방법에 대해 질문했습니다. 유일한 대답은 (작동하는 동안) adapt.js와 같은 javascript를 사용하여로드 할 스타일 시트를 결정하는 것이 었습니다.

나는 다음, 한 주변에 땜질하고 어쨌든 IE7에서 나를 위해 일한 unbelieveably 간단한 솔루션을 실현되었습니다

.wrapper{width:1024px;} 

@media all and (min-width: 1025px) { 
    .wrapper{width:1024px;} 
} 

@media all and (max-width: 1024px) { 
    .wrapper{width:1024px;} 
} 

@media all and (max-width: 900px){ 
    .wrapper{width:900px;} 
} 

을 위 그냥 정말 간단한 예입니다. 내가 주위를 노려 보았을 때 .wrapper IE7의 기본값을 지정하고 미디어 쿼리를 무시했다면 알아 차렸다. Chrome/FF/Safari에서는 미디어 쿼리 CSS를 사용했습니다. 이것은 자바 스크립트에 호환 가능한 해결 방법이 될 수 있다고 생각하지만, 브라우저 호환성이나 SEO 여부에 상관없이 어떤 파급 효과가 있는지는 잘 모르겠습니다.

구현하기에 좋지 않은 방법이며 호환성 문제가 있습니까? 나는 하나의 파일에 모든 CSS를 갖는 아이디어를 좋아한다.

의견을 보내 주셔서 감사합니다.

Answer 1

max-width 미디어 쿼리를 주문하면 계단식으로이 규칙이 완전히 필요하지 않음을 의미합니다. 당신이 스타일을하지 않을 경우, 당신은 자신의 @media 블록에 앉아 있지 않는 당신의 첫 번째 규칙과는 다른 것으로이 규칙에서 제거 할 수 있습니다 : 그 외에

@media all and (min-width: 1025px) { 
    .wrapper{width:1024px;} 
} 

, 나는 어떤 파급 효과 나 호환성 문제가 표시되지 않습니다 . @media 규칙을 사용하는 미디어 쿼리가 사용되는 방법은 거의 다릅니다.