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

了解@media和MS IE 9

1 个答案: