ホームページ > 記事 > ウェブフロントエンド > Web レスポンシブ レイアウトにおける iframe 適応の方法を分析する
問題
レスポンシブレイアウトでは、iframe要素とiframe要素の幅に注意する必要があります 属性と height 属性 は幅と高さを設定しますが、含まれるブロックの幅または高さが iframe の幅または高さより小さい場合、iframe 要素はオーバーフローします。
iframe 要素をレスポンシブにするメソッドを使用できます。
解決策
js を通じて幅が表示されない限り、iframe 要素自体を取り消すことはできません。 iframe を使用する - コンテナー要素は iframe をラップしますが、iframe-container 要素の幅が包含ブロックの幅を埋めるようにし、iframe-container 要素の padding-bottom パーセンテージをアスペクト比に従って設定します。 iframe
実際、このメソッドの本質は、iframe-container 要素の padding-bottom 属性を設定することです。 height 属性が設定されている場合、padding-bottom のパーセントは親要素の高さに対する相対値であり、通常は親要素の高さの値としてデフォルトの auto を使用します。子要素の高さも 0 になります。 したがって、この方法では、iframe 要素に
.wrap{ width: 400px; margin: auto; border: 5px solid greenyellow; } .iframe-container{ height: 0; padding-bottom: 97.6%; position: relative; } .iframe-container iframe{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; } @media screen and (max-width: 400px) { .wrap{ width: 300px; } }
を設定するだけで済みます。
<p class="wrap"> <p class="iframe-container"> <iframe height=498 width=510 src="<a href="http://player.youku.com/embed/XOTE0MjkyODgw">http://player.youku.com/embed/XOTE0MjkyODgw</a>" frameborder=0 allowfullscreen></iframe> </p> </p>
表示されるステータス:
ビューポートの幅が400pxを超える場合:
ビューポートの幅が400px未満の場合:
概要
以上がWeb レスポンシブ レイアウトにおける iframe 適応の方法を分析するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。