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 サイトの他の関連記事を参照してください。