Wie kann die absolute Positionierung in CSS mit allen Auflösungen kompatibel sein?-CSS-Tutorial-php.cn

Wie kann die absolute Positionierung in CSS mit allen Auflösungen kompatibel sein?

php中世界最好的语言

Freigeben： 2018-03-21 14:57:23

Original

3389 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie die absolute Positionierung mit allen Auflösungen kompatibel ist. Welche Vorsichtsmaßnahmen gibt es für die absolute Kompatibilität von CSS mit allen Auflösungen? Werfen wir einen Blick darauf.

Manchmal stellen wir beim Schreiben einer Seite fest, dass das absolut positionierte übergeordnete Element relativ positioniert ist. Auf Computern mit unterschiedlichen Auflösungen scheint die relative Positionierung jedoch immer noch verwechselt zu sein des Elternteils funktioniert es nicht.

Zunächst müssen Sie die folgenden Prinzipien verstehen:

1. Die Auflösung von Laptops liegt im Allgemeinen bei etwa 1366*768, und die Auflösung von PCs beträgt im Allgemeinen 1920 *1080 ;

Die folgenden sind gängige Computerauflösungen:

Wenn Sie beim Schreiben einer Webseite diese in einer großen Auflösung wie 1920 schreiben, dann Gehen Sie zu einer kleinen Auflösung. Wenn Sie dieselbe Webseite auf einem Hochgeschwindigkeits-Laptop betrachten, werden Sie feststellen, dass der Laptop die Webseite auf einem großen Breitbildmonitor im Wesentlichen etwa 1,5-fach vergrößert anzeigt.

2. Damit die Seite unter verschiedenen Auflösungen normal angezeigt wird, muss der Seite eine sichere Breite zugewiesen werden. Im Allgemeinen gilt: Es sollte eine sichere Breite von etwa 1200 Pixel haben und der gesamte Inhalt muss in ein Feld dieser Breite geschrieben werden. Wenn ein Hintergrundbild oder Karussellbild die gesamte Seite abdecken muss, muss es auf zentrierte Ausrichtung eingestellt werden dass bei einer Reduzierung der Auflösung das Hintergrundbild oder die Bannerbild-Boxen mit einer Breite von 1200 links, rechts und in der Mitte immer noch zentriert sind und nicht nach links oder rechts abweichen.

Kleine Kästchen wie p im Kästchen können als Prozentsätze ausgedrückt werden, um eine Seitenanpassung zu erreichen.

Verwendung der absoluten Positionierung:

Bei der absoluten Positionierung muss das übergeordnete Element des Elements daran denken, es auf relative Positionierung einzustellen, damit Es kann in verschiedenen Situationen verwendet werden. Die Positionierung wird unter der Auflösung nicht beeinträchtigt, es wird jedoch davon ausgegangen, dass sich das übergeordnete Element innerhalb einer sicheren Breite befindet Auflösung wird die Positionierung definitiv durcheinander gebracht.

Beim Layout der Seitenstruktur sind einige Box-Frames unerlässlich, wie z. B. p mit einer sicheren Breite von 1200 Pixeln.

Zum Beispiel: Erstellen Sie eine Veranstaltungsseite, bei der der Hintergrund dieser Seite ein großes Bild ist, um es mit dem großen Bild zu positionieren direkt als Hintergrund!

Fügen Sie stattdessen weiterhin eine sichere Breite p in das p des vergrößerten Bildhintergrunds ein und verwenden Sie es dann als übergeordnetes Element für die relative Positionierung und absolute Positionierung für die darin enthaltenen untergeordneten Elemente, damit es nicht angezeigt wird unter verschiedenen Auflösungen. Das Problem der absoluten Positionierung ist verwirrend.

Durch die Zusammenfassung der Erfahrungen von Internetnutzern kann durch Hinzufügen des Zoom-Attributs

ein bestimmter Abschnitt der Seite je nach Auflösung automatisch auf den entsprechenden Bereich gezoomt werden. Es liegt jedoch ein Fehler vor. Das heißt, Firefox-Browser unterstützen dieses Attribut nicht, selbst die Verwendung des transform:scale(x,y);-Attributs hilft nicht. Es gibt auch ein kleines Problem, wenn die Seite langsam geladen wird. Beim Aktualisieren wird zunächst der vergrößerte Effekt angezeigt, der dann für eine Weile blinkt. Ich habe keine Lösung dafür gefunden Ich hoffe, Freunde, die mehr wissen, können miteinander kommunizieren.

Zoomcode lautet wie folgt:

$(function(){        var w=window.screen.width;        var zoom=w/1920;

$("#container").css({
        "zoom",zoom,
        "-moz-transform":"scale("+zoom+")",
　　　　　　"-moz-transform-origin":"top left"
      });
 });

Nach dem Login kopieren

Zoom: aktuelle Bildschirmauflösungsbreite/1920;

Browserunterstützung für Zoomattribut:

Das Ergebnis ist: Mit Ausnahme von Firefox können andere Browser das Zoom-Attribut normal unterstützen, und der gesamte Block der Seite, der skaliert werden muss, wird während der Transformation skaliert, um sich an die aktuelle Auflösung anzupassen : Maßstab ist. Zeigen Sie die Seite zunächst so an, als ob die Originalseite vergrößert worden wäre, und verwenden Sie dann den Maßstab. Die Verkleinerung entspricht dem Verkleinerungseffekt der aktuellen Seite, und beide Seiten bleiben natürlich leer.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

So erstellen Sie eine 0,5-Pixel-Linie in CSS

Css3 Transition-Implementierung der Menüleiste für reibungslose Übergänge

Das obige ist der detaillierte Inhalt vonWie kann die absolute Positionierung in CSS mit allen Auflösungen kompatibel sein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!