0

我最近问了一个关于如何在支持不支持它们的旧浏览器的回退的同时使用媒体查询的问题。唯一的答案（当它有效时）是使用 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。这使我认为这可能是与 javascript 兼容的解决方法，但我不确定浏览器兼容性或 SEO 是否会产生任何影响。

这是一种不好的实现方式吗？它会有任何兼容性问题吗？我喜欢将所有 css 放在一个文件中的想法。

任何想法将不胜感激，谢谢！

4

1 回答 1

0

您对媒体查询的排序max-width意味着通过级联，这条规则变得完全没有必要；您可以删除它，除非您希望此规则中的样式与您的第一个规则不同，该规则不在其自己的@media块中：

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

除此之外，我没有看到任何后果或兼容性问题。这几乎就是使用带有@media规则的媒体查询的方式。

于 2012-10-09T03:36:48.683 回答