html – 媒体查询无法在iframe中运行

我在一个有响应的网页上.它利用媒体查询.

但是加载在iframe中的同一页面不起作用.

例如,考虑到我的网页,当屏幕宽度小于640px时,我将背景颜色赋予红色.

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

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

所以当我加载该窗口在一个新的选项卡,使浏览器的宽度小于640px时,背景颜色变为红色.

但是,当加载在320 * 480尺寸的iframe中时,同一个窗口没有背景颜色红色.

简而言之,在iframe中查询不起作用.

请帮忙

解决方法

尝试这样,而不是设备只是目标的宽度

更改

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