DIV als Rahmen verwenden: Responsive Layout-Implementierung

In diesem Artikel soll erläutert werden, wie ein DIV-Element als Rand eines anderen DIV-Elements verwendet und ein responsives Layout implementiert wird, um die Anpassungsprobleme zu vermeiden, die durch die Verwendung fester Pixelwerte verursacht werden. Durch Ändern des Attributs „margin-top“ in CSS und Ändern von einem festen Pixelwert in einen Prozentsatz kann das Zielelement adaptiv relativ zu anderen Elementen positioniert werden, die prozentual skaliert werden, wodurch ein reaktionsfähiger Effekt erzielt wird.

Problemanalyse

Der ursprüngliche Code versucht, ein Div als Rand eines anderen Div zu verwenden und die Positionierungsbeziehung zwischen den beiden Divs durch negative Randwerte anzupassen. Die Verwendung negativer Ränder mit festen Pixelwerten führt jedoch zu einer Fehlausrichtung bei unterschiedlichen Bildschirmgrößen und kann kein reaktionsfähiges Layout erreichen. Der Kern des Problems besteht darin, dafür zu sorgen, dass sich das #gallery1-Element immer unter dem .hovertrigger-Element befindet und einen bestimmten Abstand einhält, und dieser Abstand kann adaptiv angepasst werden, wenn sich die Bildschirmgröße ändert.

Lösung

Ändern Sie das Attribut „margin-top“ des Elements #gallery1 von einem festen Pixelwert in einen Prozentsatz. Da andere div-Elemente bereits mit Prozentsätzen skaliert sind, ermöglicht die Verwendung eines Prozentsatzes „marge-top“ die adaptive Positionierung des #gallery1-Elements relativ zu diesen Elementen.

Codebeispiel

Ändern Sie den folgenden CSS-Code:

 #gallery1 {
  Rand oben: -590px;
}

Ersetzen durch:

 #gallery1 {
  Marge oben: -38 %;
}

Prinzipielle Erklärung

Wenn Sie margin-top auf -38 % setzen, wird das Element #gallery1 um 38 % der Höhe seines übergeordneten Elements nach oben verschoben. Da die Höhe von Elementen wie .hovertrigger auf der Grundlage von Prozentsätzen berechnet wird, passt sich auch die Position von #gallery1 entsprechend an, wenn sich die Bildschirmgröße ändert, was zu einem responsiven Layout führt. Passen Sie den Prozentwert an, um den Abstand zwischen #gallery1 und .hovertrigger zu steuern.

Vollständiger Beispielcode

Hier ist der vollständige Beispielcode mit geändertem CSS:

 <div class="container">
  <div class="hovertrigger" id="hovertrigger1"></div>
  <div class="logoanim" id="logoanim1"><img class="wp-image-536 lazy" src="/static/imghw/default1.png" data-src="http://lilphil.de/wp-content/uploads/2022/08/Comp-1.gif" alt=""></div>
  <div class="logo" id="logo1"><img class="wp-image-587 lazy" src="/static/imghw/default1.png" data-src="http://lilphil.de/wp-content/uploads/2022/08/Comp1_00000.jpg" alt=""></div>
</div>
<div class="wp-block-gmedia-gallery gmedia-shortcode" id="gallery1">[gmedia id=13]</div>

 .container {
  Anzeige: Raster;
  Rastervorlagenspalten: wiederholen(4, 1fr);
  Rastervorlagenzeilen: wiederholen (5, 1fr);
  Gitterspaltenlücke: 0px;
  Gitterzeilenlücke: 0px;
  Mischmodus: Aufhellen;
  Z-Index: 100;
  Zeigerereignisse: keine;
  Position: relativ;
  Mix-Blend-Modus: Aufhellen;
}

.logo {
  Rasterfläche: 1 / 1 / 6 / 5;
  Textausrichtung: Mitte;
  Z-Index: 400;
  Deckkraft: 1;
  Zeigerereignisse: keine;
  Höhe: 100 %;
  Breite: 100 %;
}

.hovertrigger {
  Z-Index: 1000;
  Rasterfläche: 1 / 1 / 4 / 5;
  Breite: 100 %;
  Höhe: 50 %;
  Zeigerereignisse: auto;
  Hintergrund: keiner;
}

.logoanim {
  Rasterfläche: 1 / 1 / 6 / 5;
  Textausrichtung: Mitte;
  Z-Index: 500;
  Deckkraft: 0;
  Zeigerereignisse: keine;
  Höhe: 100 %;
  Breite: 100 %;
}

#gallery1 {
  Marge oben: -38 %;
}

#hovertrigger1:hover~.logoanim {
  Deckkraft: 1;
}

#hovertrigger1:hover~div.logo {
  Deckkraft: 0
}

.wp-image-536 {
  Höhe: 100 %;
  Breite: 100 %;
  Objektanpassung: Abdeckung;
}

.wp-image-587 {
  Höhe: 100 %;
  Breite: 100 %;
  Objektanpassung: Abdeckung;
}

Dinge zu beachten

• Um den besten visuellen Effekt zu erzielen, muss die Auswahl des Prozentwerts an die tatsächliche Situation angepasst werden.
• Stellen Sie sicher, dass die Höhe oder Position anderer verwandter Elemente ebenfalls auf der Grundlage von Prozentsätzen oder relativen Einheiten festgelegt wird, um die Gesamtkonsistenz des responsiven Layouts sicherzustellen.
• Mit den Entwicklertools Ihres Browsers können Sie überprüfen, wie das Layout auf verschiedenen Bildschirmgrößen aussieht, und gegebenenfalls Anpassungen vornehmen.

Zusammenfassen

Indem Sie den festen Pixelwert von margin-top durch einen Prozentsatz ersetzen, können Sie die Probleme mit dem reaktionsfähigen Layout, die bei der Verwendung von DIVs als Rahmen auftreten, effektiv lösen. Diese Methode ist einfach und leicht zu implementieren und lässt sich gut an unterschiedliche Bildschirmgrößen anpassen, wodurch das Benutzererlebnis verbessert wird. Denken Sie daran, dass der Schlüssel zum responsiven Design in der Verwendung relativer Einheiten und flexibler Layoutmethoden liegt und absolute Positionierung und feste Pixelwerte vermieden werden.

Das obige ist der detaillierte Inhalt vonDIV als Rahmen verwenden: Responsive Layout-Implementierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!