CSS媒體查詢 - 這是一種不好的實現方式？

Question

我最近問了一個關於如何使用媒體查詢的問題，同時支持不支持它們的舊瀏覽器的回退。唯一的答案（雖然它的工作原理）是使用Javascript，如adapt.js來確定要加載的樣式表。

我一直在擺弄周圍，實現了unbelieveably簡單的解決方案，在IE7反正工作對我來說，是以下幾點：

.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。這導致我認爲這可以是javaascript兼容的解決方法，但我不確定是否存在任何後果，無論是瀏覽器兼容性還是SEO。

這是一個糟糕的方式來實現，它會有任何兼容性問題？我喜歡把所有的CSS都放在一個文件中。

任何想法，將不勝感激，謝謝！

Answer 1

您對max-width媒體查詢的訂購意味着通過級聯，此規則變得完全沒有必要;除非你打算的樣式，你可以刪除它在這個規則會比你的第一條規則不同不以自己的@media塊坐：

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

除此之外，我沒有看到任何後果或兼容性問題。這幾乎是如何使用@media規則的媒體查詢。