媒体查询被收藏

Question

触发我使用的fancybox 2，并有mediaquery它看起来像这样：

@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中触发媒体查询。