媒体查询在iframe中不起作用

小编典典

css

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

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

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

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

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

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

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

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

阅读 1172

2020-05-16

共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;
    }
}

2020-05-16