我在一个有响应的网页上.它利用媒体查询.
但是加载在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;
- }
- }
