浏览器中的 CSS 媒体查询问题答案

【问题标题】：css media query issue in browser浏览器中的 CSS 媒体查询问题
【发布时间】：2013-03-15 20:38:17
【问题描述】：

我把这个 css

@import url("large_screen.css")all;
@import url("small_screen.css")(max-width : 1024px);

这个 css 文件在 chrome、mozila 浏览器中工作，它在小屏幕和大屏幕分辨率下工作，但即只渲染“large_screen.css”文件，不能在小分辨率 css (1024X768) 下工作，它是如何解决这个问题的，请帮忙！

【问题讨论】：

如果是老版本的IE，不行。

标签： internet-explorer css media-queries

【解决方案1】：

我认为你可以试试：

@import url("small_screen.css")(max-width:1024px) and (orientation:landscape);

或/和

@import url("small_screen.css")(max-width:768px) and (orientation:portrait);

编辑

然后我建议将您的样式放入媒体查询中。示例：

@media only screen and (max-width:1024px) and (orientation:landscape) {
    /* Styles here */
}

@media only screen and (max-width:768px) and (orientation:portrait) {
    /* Styles here */
}

【讨论】：

【解决方案2】：

IE 的哪个版本？低于 9 的任何内容都会对媒体查询产生问题。您必须在 CSS 文件中进行 IE 修复，或加载 JS 文件以帮助渲染较低版本。

http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

【讨论】：

嗨，keoki！我使用了但仍然无法在 ie 中使用小分辨率 css，你能帮帮我吗
IE 是一种棘手的动物，所以我只能建议继续搜索。我还没有找到适用于所有版本（包括 8 个）的 IE 解决方案。它可能适用于 IE 9，但不适用于 IE 8； IE9 忽略了适用于 IE 8 的内容。您可能需要刷新才能看到内容修复本身。你试过 response.js 吗？ github.com/scottjehl/Respond