Wie kann die absolute Positionierung von Computer-CSS unter verschiedenen Auflösungen normal angezeigt werden?

In diesem Artikel wird hauptsächlich erläutert, wie die Positionierungsposition auf Computern mit unterschiedlichen Auflösungen normal angezeigt werden kann. Damit die Seite bei unterschiedlichen Auflösungen normal angezeigt werden kann, muss eine sichere Breite angegeben werden Gehen Sie zur Seite und verwenden Sie dann die detaillierte Erklärung für die einzelnen Schritte. Ich hoffe, dass sie allen weiterhelfen kann.

Manchmal stellen wir beim Schreiben einer Seite fest, dass das absolut positionierte übergeordnete Element relativ positioniert wurde. Bei Computern mit unterschiedlichen Auflösungen scheint die relative Positionierung jedoch immer noch zu verwechseln 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 in verschiedenen Auflösungen normal angezeigt wird, muss der Seite eine sichere Breite zugewiesen werden. Im Allgemeinen muss bei der Erstellung einer 1920 Pixel breiten Seite eine sichere Breite vorhanden sein Breite von etwa 1200 Pixeln in der Mitte und zentriert. Der gesamte Inhalt muss in ein Feld mit dieser Breite geschrieben werden Beim Reduzieren der Auflösung wird das Hintergrundbild bzw. Bannerbild angezeigt. Die Kästchen mit einer Breite von 1200 links und rechts sowie in der Mitte sind weiterhin zentriert und weichen nicht nach links oder rechts aus.

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

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 Erfahrung 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 gibt jedoch einen Fehler, der nicht unterstützt wird Dieses Attribut hilft nicht, selbst das Attribut transform:scale(x,y); 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"
      });
 });

Zoom: aktuelle Bildschirmauflösungsbreite/1920;

Zoomattribut Browser-Unterstützung:

Das Ergebnis ist: Mit Ausnahme von Firefox können andere Browser das Zoom-Attribut normal unterstützen und der gesamte Block der Seite, auf den gezoomt werden muss, wird skaliert Der Effekt von transform:scale besteht darin, dass die Seite zunächst so angezeigt wird, als ob sie die Originalseite vergrößert hätte, und dass die Verkleinerung dann dem Verkleinerungseffekt der aktuellen Seite entspricht leer gelassen.

Verwandte Empfehlungen:

Relative Positionierung und absolute Positionierung in HTML

Detaillierte Tabelle der Vor- und Nachteile der CSS-Technologie zur absoluten Positionierungszentrierung

Einführung und Verwendung der relativen und absoluten Positionierung in CSS

Das obige ist der detaillierte Inhalt vonWie kann die absolute Positionierung von Computer-CSS unter verschiedenen Auflösungen normal angezeigt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!