Question

我有一个关于根据浏览器的大小显示/隐藏内容的问题。

我编码的网站目前是本地的，因此我无法显示整页。但问题是：

主站点宽1000px。右侧有一个小面板，1000px的OUTSIDE，用于特殊内容。特殊内容是200px宽，这意味着当浏览器小于1400px宽时，我会在底部给出一个垂直滚动条。而不是这个，我希望在浏览器达到＆lt; 1400px时删除/隐藏该内容。我使用以下代码：

    @media all and (max-width: 1400px) {
      #side-items {
        display:none;
      }
    }

这适用于Chrome / Safari / Firefox，但在IE中不起作用（我必须支持IE8 +）。对于屏幕较小的用户，是否有跨浏览器隐藏该面板的方法？我对JS / JQuery没有过多的经验，所以我不确定是否有一个脚本可以做我正在寻找的东西。

谢谢！

Answer 1

IE8不支持媒体查询。您必须使用polyfill来获得所需的功能。

Here is one我过去曾经使用过。

Answer 2

你应该试试这个css3-mediaqueries.js是一个可以满足你需要的javascript库。

注意：不适用于@ import'ed样式表（出于性能原因，您不应该使用它们）。也不会听取元素的媒体属性。

Answer 3

IE9 +支持媒体查询，并且如其他回复中所述，可以使用多面填充来取代功能（您可能还需要查看modernizr）。

但是，我建议您重新考虑IE8上响应行为的要求。以下是您可能想要重新考虑您的要求的一些原因：

Windows将在不久的将来停止支持IE8，而Foundation等公司已经主动停止支持它。
考虑您的受众群体。普通用户不像开发人员那样倾向于调整浏览器窗口的大小，使用IE8的人不太可能在移动设备上。使用IE8的人不太可能拥有一个小屏幕。
通过使用poly-fills进行媒体查询，您将在javascript中添加样式。创建两个必须维护断点/媒体查询的地方（css和js）。
处理IE8的一种技巧是将您的页面样式包装在媒体查询中，然后如果broswer是IE8则有另外一个有条件导入的文件。此IE8文件导入必要的样式，不带媒体查询，以提供默认的全视图＆＃39;。这意味着所有浏览器都会获得响应式样式，除非浏览器是IE8，否则所有的媒体查询都将被忽略，并且“全视图”＃39;将被导入。