メディアクエリによるiframeの高さの設定

この埋め込みロードを200pxのiframeに、モバイル画面用に140pxの高さに読み込もうとしています。メディアクエリによるiframeの高さの設定

<!DOCTYPE html> 
<html> 
<style type="text/css"> 
    @media only screen and (max-device-width: 480px) { 
     .iframe { 
     height:140px; 
     } 
    } 
</style> 

    <body style="margin:0px"> 

    <iframe width="100%" height="200" src="https://www.youtube.com/embed/FtveSk1N7Uo?enablejsapi=1&origin=http://domain.com&autoplay=1" frameborder="0" allowfullscreen></iframe> 

    </body> 
</html>

インラインスタイル（IFRAMEのheight="200"）は、任意の他のスタイルよりも優先されますので、これはそれが働いていない

出典

2016-10-18 nadermx

かかわらず機能していません。また、セレクタがマークアップと一致しません。（要素）は.iframe（クラス）でなくてはなりません。

は、IFRAMEのオフheight=200を取って、自分のスタイルであなたのメディアクエリの前にそれを入れてみてください：

iframe { 
    height: 200px; 
} 

@media only screen and (max-device-width: 480px) { 
    iframe { 
    height:140px; 
    }

}

をサイドノートでは、それはmax-widthの代わりmax-device-widthを使用することが一般的に良いでしょう。前者は小さなラップトップやデスクトップブラウザのウィンドウに小さなスタイルを適用します。後者はできません。

出典

2016-10-18 04:08:23 jack

DEMO：

http://plnkr.co/edit/GcaMYbu1lEBJqL1OQnL2?p=preview

.iframeないのiframeでなければなりません。 '。'クラスとiframeのセレクタはここではクラスではなくhtml要素なので、要素名だけで記述する必要があります。

@media only screen and (max-device-width: 480px) { 
     iframe { 
     height:140px; 
     } 
    }

出典

2016-10-18 04:09:56

メディアクエリによるiframeの高さの設定

答えて

関連する問題