浏览器中的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 */
}