Über responsives Layout

Kompatibel mit verschiedenen Geräten, hohe Arbeitsbelastung und geringe Effizienz

Der Code ist umständlich, versteckte und nutzlose Elemente werden angezeigt und die Ladezeit verlängert sich

Tatsächlich handelt es sich hierbei um eine Kompromisslösung, die von vielen Faktoren beeinflusst wird und nicht die besten Ergebnisse erzielen kann

Dadurch wurde die ursprüngliche Layoutstruktur der Website bis zu einem gewissen Grad geändert, was zu Verwirrung bei den Benutzern führen kann

Wenn Sie über reaktionsfähiges Layout sprechen, müssen Sie an die Medienabfrage von CSS3 denken, die einfach zu verwenden, praktisch und leistungsstark ist. Mit diesem Tool können Sie reaktionsfähige Layouts erstellen Es ist sehr praktisch. Eine Vielzahl von Schnittstellen, die reichhaltig und äußerst benutzerfreundlich sind.

Medienabfragen ermöglichen es CSS, genauer auf verschiedene Medientypen und unterschiedliche Bedingungen auf demselben Medium zu reagieren. Die meisten Medienfunktionen von Medienabfragen akzeptieren Min und Max, um „größer als oder gleich“ und „kleiner als oder gleich“ auszudrücken. Beispielsweise verfügt „width“ über „min-width“ und „max-width“, die in @media- und @import-Regeln in CSS sowie in HTML und XML verwendet werden können. Durch dieses Attribut können wir problemlos umfangreiche Schnittstellen auf verschiedenen Geräten implementieren, insbesondere auf mobilen Geräten, die häufiger verwendet werden.

　Verwendung und Struktur

　1. Verwenden Sie @media im Link
　　　

Bei der oben genannten Verwendung kann nur auf Computermonitore verzichtet werden. Die maximale Breite in der ersten Bedingung bezieht sich auf die maximale Breite der zu rendernden Schnittstelle, und die maximale Gerätebreite ist die maximale Breite des Geräts.

　2. Betten Sie @media

　　　@media (min-device-width:1024px) und (max-width:989px), screen und (max-device-width:480px), (max-device-width:480px) und (orientierung:querformat) , (min-device-width:480px) und (max-device-width:1024px) und (orientierung:portrait) {}

In diesem Beispiel ist die Auflösung (Breite) des Computermonitors auf mindestens 1024 Pixel eingestellt (und die maximale sichtbare Breite beträgt 989 Pixel); Handheld-Geräte mit einem Bildschirm Breite von 480 Pixel und horizontal platziert; CSS-Stil für Bildschirmbreite größer oder gleich 480 Pixel, aber weniger als 1024 Pixel und für vertikal platzierte Geräte.

　Responsives Layout durch Medienabfrage

　Definieren Sie zunächst die feste Breite unter dem Standardbrowser (vorausgesetzt, die Browserauflösung beträgt 1024 Pixel und die Breite beträgt 980 Pixel) und überwachen Sie dann die Größenänderung des Browsers, wenn der Browser aktiviert ist die Auflösung kleiner als 1024px ist, wird die Seitenbreite über das voreingestellte Stylesheet von Media Query auf eine prozentuale Darstellung eingestellt, so dass die Strukturelemente der Unterseite entsprechend der Größe des Browsers angepasst werden. Wenn sich der sichtbare Teil des Browsers auf einen bestimmten Wert ändert, werden auf die gleiche Weise die Strukturelemente der Seite entsprechend dem von Media Query voreingestellten Cascading Style Sheet angepasst.

Wir können auch zum hinzufügen Moving Eine Anweisung, um die ursprüngliche Größe der Anzeige festzulegen und ob sie auf dem Gerät skaliert werden soll.

Parameter: