Question

我想在400px的方形iframe中显示demo.html页面。当视口小于400px时，demo.html应仅显示图像。稍后，当我在demo.html中点击该图像时，同一页面应呈现为全屏模式。

例如，您可以从slideshare.com嵌入幻灯片，然后单击全屏图标以全屏显示。我希望我的页面能够呈现类似的内容。

Answer 1

调整小提琴的大小以查看媒体查询的工作情况。

html

<body>
  <img src="" id="smallScreenImage" width="500" height="500" />

  <div id="mainContentWrap">
    <div>All content goes here that should be displayed above 500px</div>
  </div>

</body>

CSS

#smallScreenImage {display: none;}
#mainContentWrap {display: block;}

@media only screen and (max-width:500px){
    #smallScreenImage {display: block;}
    #mainContentWrap {display: none;}
}

使用媒体查询在iframe视口较小时显示图像

1 个答案: