媒体查询由灯箱触发

Question

我正在使用Fancybox 2，并且有一个看起来像这样的媒体查询：

@media (max-width : 1200px) {

#columnset1_column1 {
    display: none;
}
#sitelayout6 {
    width: 980px !important;
}
#columnset3 {
    display: block;
}
#columnset2 {
    margin-top: 70px;
}
}

但奇怪的是媒体查询是在显示iframe的灯箱时触发的。它显示的页面只有700像素宽。

这只是Internet Explorer中的一个问题，而不是Chrome。

窗口大小在任何时候都不会调整大小。

Answer 1

我在这里找到了一个有帮助的答案： Fancybox 2 Forcing Responsive Media Queries in IE

基本上，在iframe中，更新对CSS的引用以包含查询字符串...

因此，在您的父页面中，您有：

<link rel="stylesheet" href="screen.css" />

在您的iframe中，您有

<link rel="stylesheet" href="screen.css?iframe=true" />

这解决了IE中的一个错误，导致iframe在您的css中触发父页面的媒体查询。