媒体查询在iframe中不起作用

Question

我有一个响应迅速的网页。它利用媒体查询。

但是在iframe中加载的同一页面无法正常工作。

例如，考虑到我的网页，当屏幕宽度小于640px时，我将背景色设置为红色。

@media only screen and (max-device-width : 640px) {

    .header-text {
        background-color: red;
    }
}

因此，当我在新标签页中加载该窗口并使浏览器宽度小于640px时，背景颜色变为红色。

但是，在以320 * 480尺寸的iframe加载时，同一窗口没有红色的背景色。

如何使媒体查询在iframe中工作？

Answer 1

以这种方式尝试，而不device只是针对width

更改

@media only screen and (max-device-width : 640px) {

至

@media only screen and (max-width : 640px) {

另外，如果您要避免考虑样式表中媒体查询声明的顺序，则建议同时设置 最小 和 最大 视口宽度

@media screen and (min-width: 320px) and (max-width: 640px) {
    .header-text {
       background-color: blue;
    }
}