internet-explorer - 浏览器中的 CSS 媒体查询问题

Question

我把这个CSS

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

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

Answer 1

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

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

Answer 2

在我看来，您可以尝试：

@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 */
}