css媒体查询 - 这是一种不好的实施方式吗？

Question

我最近问了一个关于如何使用媒体查询的问题，同时支持不支持它们的旧浏览器的回退。唯一的答案（虽然它有效）是使用javascript，如adapt.js来确定要加载的样式表。

我一直在修补，并意识到一个不可思议的简单解决方案，无论如何在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规则的媒体查询。