Html 更改媒体查询时调用iframe

我在做一个网页，在这个网页中我把一个iframe和一个图像放在一起，当我改变媒体查询时，我需要改变iframe里面的内容，例如如果我在

min width 900px

，给我看

src=“path/one.html”

，如果我在宽度为1980px的

，给我看
src=“path/two.html”
，谁来帮忙

iframe{
    display: none;
}
@media (min-width: 900px) {
  #iframe1{ display: inline; }
}
@media (min-width: 1980px) {
  #iframe2{ display: inline; }
}

及

如果您想使用jquery，可以这样做：

$(window).on('resize', function(){ /* resize event handler when user resizes the window */
    var windWidth =  $(window).width(); /* gets window width in pixel after resize */
    var iframe = $("#iframe1"); /* iframe dom element */

    if(windWidth >= 900 && windWidth < 1980){
        iframe.attr("src","path/one.html");  /*when window width between 900 and 1979*/
    }else if(windWidth >= 1980){  
        iframe.attr("src","path/two.html"); /*when window width 1980 and larger */
     }
})

$（窗口）.on（'resize'，function（）{/*在用户调整窗口大小时调整事件处理程序的大小*/
var windWidth=$（window）.width（）；/*在调整大小后以像素为单位获取窗口宽度*/
变量iframe=$（“#iframe1”）；/*iframe dom元素*/
如果（windWidth>=900&&windWidth<1980）{
当窗口宽度介于900和1979之间时，iframe.attr（“src”，“path/one.html”）；/**/
}如果（风宽>=1980）{
当窗口宽度大于等于1980时，iframe.attr（“src”，“path/two.html”）；/**/
}
})
这需要在Javascript中完成。您正在动态更改iframe的源。使用CSS的一种方法是打开两个iframe，但根据@media查询隐藏一个iframe。如果我不懂javascript，我非常感谢您的帮助。Mooseman的答案就是我会做的。这只使用HTML/CSS。从技术上讲，这不会改变iframe的src，但是CSS没有其他方法
$(window).on('resize', function(){ /* resize event handler when user resizes the window */
    var windWidth =  $(window).width(); /* gets window width in pixel after resize */
    var iframe = $("#iframe1"); /* iframe dom element */

    if(windWidth >= 900 && windWidth < 1980){
        iframe.attr("src","path/one.html");  /*when window width between 900 and 1979*/
    }else if(windWidth >= 1980){  
        iframe.attr("src","path/two.html"); /*when window width 1980 and larger */
     }
})