Über responsives Layout

Responsives Layout bedeutet, dass eine Website mit mehreren Arten von Terminals kompatibel sein kann, es jedoch nicht erforderlich ist, für jedes Terminal eine bestimmte Webseitenversion zu erstellen. Responsives Layout kann Benutzern auf verschiedenen Endgeräten eine komfortablere Benutzeroberfläche und Benutzererfahrung bieten. Mit dem Aufkommen immer mehr mobiler Geräte mit großem Bildschirm ist Responsive Layout zu einer von Entwicklern weit verbreiteten WEB-Technologie geworden.

Vorteile:

Hohe Flexibilität für Geräte mit unterschiedlichen Auflösungen

Kann das Problem der Anzeigeanpassung mehrerer Geräte schnell lösen

Nachteile:

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

in das Stylesheet ein

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

Breite – die Breite des Ansichtsfensters

Höhe – die Höhe des Ansichtsfensters

Anfangsskalierung – Anfangsskalierungsverhältnis

Mindestmaßstab – Der minimale Maßstab, auf den der Benutzer zoomen darf

Maximaler Maßstab – Der maximale Maßstab, auf den der Benutzer zoomen darf

Vom Benutzer skalierbar – ob der Benutzer manuell skalieren kann

Medienabfrage wird in den meisten Browsern unterstützt, in einigen Browsern jedoch nicht, z. B. im IE-Browser. Sie müssen Media Query Javascript verwenden, um das Problem zu lösen.