css - 了解@media 和 MS IE 9

Question

我正在尝试让滚动框根据其宽度调整其高度，以便网页在笔记本电脑和大屏幕上看起来都不错。让页面在 IE、Firefox 和 Chrome 中看起来一样是一件令人烦恼的事情。

我正在使用以下内容，它适用于 Firefox 和 Chrome。对IE无影响；

@media(max-width:1366px)
        {
        .scroll 
                {
                max-height: 400px;
                overflow-y: auto;
                overflow-x: hidden;
                }
        }
@media(min-width:1824px)
        {
        .scroll 
                {
                max-height: 600px;
                overflow-y: auto;
                overflow-x: hidden;
                }
        }

是否可以向此语法添加任何内容以使其与 IE 一起使用？我目前在不使用 javascript 的情况下执行此操作，因为坦率地说，我对 JS 了解不多。

Answer 1

IE 版本 9 支持媒体查询 proof here .

您可能觉得媒体查询不起作用是因为您可能正在使用 IE Developer 工具并切换到兼容模式。

如果您在 ie9 的实际版本中进行测试，那么您应该可以使用 css。

---

我找到的最佳解决方案是 Respond.js特别是如果你主要关心的是确保你的响应式设计在 IE8 中工作。它在 min/gzip 压缩后只有 1kb，非常轻量，你可以确保只有 IE8 客户端加载它:

<!--[if lt IE 9]>
<script src="respond.min.js"></script>
<![endif]-->

source

---

css3-mediaqueries-js可能是您正在寻找的:此脚本模拟媒体查询。然而(来自脚本的网站)它“不适用于 @import ed 样式表(出于性能原因你不应该使用它)。也不会听 <link> 和 <style> 的媒体属性。元素”。

同样，您有更简单的 Respond.js , 它只启用 min-width和 max-width媒体查询。

source