Analysieren Sie die Methode der Iframe-Anpassung im Web-Responsive-Layout

Frage
unter Responsive In Beim Layout sollten wir mit den Attributen width und height des iframe-Elements vorsichtig sein, aber wenn der enthaltende Block When Wenn die Breite oder Höhe kleiner als die Breite oder Höhe des Iframes ist, läuft das Iframe-Element über:


Ein solcher überlaufender Iframe zerstört das Layout der Seite Verwenden Sie eine Methode. Lassen Sie das Iframe-Element auch reagieren.


LösungDas Iframe-Element selbst kann nicht zurückgezogen werden, es sei denn, seine Breite wird über js angezeigt Übergeben Sie ein iframe-container-Element, um den iframe zu umschließen, während die Breite des iframe-container-Elements die Breite des enthaltenden Blocks ausfüllt, und legen Sie den
padding-bottom-Prozentsatz des iframe-container-Elements entsprechend fest Das Seitenverhältnis des Iframes. > Tatsächlich besteht der Kern dieser Methode darin, das Padding-Bottom-Attribut des Iframe-Container-Elements festzulegen Der Prozentsatz für padding-bottom ist relativ zur Breite des übergeordneten Elements. Wenn das Höhenattribut als Prozentsatz festgelegt ist, ist es normalerweise relativ zur Höhe des übergeordneten Elements Der Höhenwert des übergeordneten Elements beträgt daher auch die Höhe des untergeordneten Elements. Daher können wir nur padding-bottom festlegen. Füllen Sie auf diese Weise einfach den iframe-Container mit

.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;
            }
        }

wie gezeigt. Status:

<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>

Wenn die Breite des Ansichtsfensters größer als 400 Pixel ist:

Wenn die Breite des Ansichtsfensters weniger als 400 Pixel beträgt:



Zusammenfassung

-->

Das obige ist der detaillierte Inhalt vonAnalysieren Sie die Methode der Iframe-Anpassung im Web-Responsive-Layout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!