Madia查询不在iframe内部工作

时间:2016-01-06 20:56:33

标签: html css media-queries

我有一个HTML页面,其中包含iframe元素,该元素占据窗口宽度的100%。在iframe的HTML和CSS中,我试图使用媒体查询,但它们似乎不起作用。

我在head标记的iframe中包含以下内容:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

并尝试在iframe CSS文件中使用它:

@media (max-device-width: 500px) {...}

@media only screen and (max-device-width: 500px) {...}

@media only screen and (max-width: 500px) {...}

如果我尝试在普通网页中使用此代码,但没有iframe,则可以正常使用。

媒体查询是否无效,即使在iframe

内也是如此

1 个答案:

答案 0 :(得分:1)

好的,我有两个小提琴。

这有I帧和媒体查询: https://jsfiddle.net/DIRTY_SMITH/komfhjdj/11/

这个人有你iframehttps://jsfiddle.net/DIRTY_SMITH/ynk1k1hj/

请注意,当iframe中的视口低于300px

时,背景颜色会发生变化

我不知道您的具体问题,所以我给您一个广泛的答案,但是,如果有任何问题请留下评论,我会尝试为您解答