css3 media query控制iframe高度的例子

在這個情境下，需要使用css media query控制iframe高度：比如一個iframe視頻在PC網頁上的高度和手機網頁上的高度不同。iframe的高度只能設定成固定高度或者所在div的百分比，我們可以通過css query控制這個div的高度，實現iframe在PC和手機上不同高度。

首先，我們在沒有定義CSS Media Query的樣式裡添加：

代碼如下	複製代碼
.iframe_height{  height: 260px; }

然後當寬度大於1024px的時候，設定CSS Media Query：

代碼如下	複製代碼
@media screen and (min-width: 1024px) {  .iframe_height{   height: 460px;  } }

引用iframe的時候需要嵌入在一個div中，div用.iframe_height的樣式並把iframe高度設成100%，如：

代碼如下	複製代碼
<div class="iframe_height"> <iframe src="/embed/XODI4OTg5NTky" width="100%" height="100%" frameborder="0" allowfullscreen="allowfullscreen"></iframe> </div>

這樣，在PC網頁中顯示的高度大好多的iframe，在手機中顯示的是高度小一點的iframe。