Eine eingehende Analyse der Prinzipien des responsiven Layouts

Apropos Responsive Layout: Ich glaube, dass Responsive Layout in diesem Jahr ein sehr beliebtes Designkonzept ist, um das Problem verschiedener Browserauflösungen zu lösen , Der Designer schlug einen responsiven Layout-Designplan vor, der auf den Geschwindigkeits- und Anzeigeeffekten verschiedener mobiler -Geräte basiert. Heute werde ich mit Ihnen über die kleinen Dinge des responsiven Layouts sprechen, einschließlich dessen, was ein responsives Layout ist, die Vor- und Nachteile eines responsiven Layouts und wie man ein responsives Layout entwirft (über CSS3 Media Query) Responsive implementieren Layout). 　

Responsives Layout ändert sich, wie der Name schon sagt, mit der Größe des Computerbildschirms. Beim responsiven Layout werden unterschiedliche Terminals zum Anzeigen der Seite verwendet, und die Seite kann in unterschiedlichen Größen angezeigt werden. Responsive Layout hat Vor- und Nachteile. Der Vorteil ist: hohe Flexibilität bei Geräten mit unterschiedlichen Auflösungen. Es kann das Problem der Anpassung der Anzeige mehrerer Geräte schnell lösen. Nachteile: Die Kompatibilität mit verschiedenen Geräten erfordert viel Arbeit, geringe Effizienz, umständlicher Code, einige versteckte nutzlose Elemente , lange Ladezeit, reaktionsfähiges Layout ist auch eine kompromittierende Designlösung und viele Aufgrund der Durch den Einfluss verschiedener Faktoren können nicht die besten Ergebnisse erzielt werden und die ursprüngliche Layoutstruktur der Website wird bis zu einem gewissen Grad geändert, was zu Verwirrung bei den Benutzern führen kann. Dies ist ein responsives Layout.

Lassen Sie uns zunächst verstehen, was das Attribut Medien ist

@media screen und (min-width: 320px) und (max-width: 479px)

Beginnen wir mit dieser bedingten Anweisung. Auf das Attribut Medien folgt ein Medientyp Bildschirm (die zehn oben genannten sind eines der Medien). Typen). Verwenden Sie dann die Schlüsselwörter und , um die Bedingungen zu verbinden, und dann gibt es in den Klammern eine Medienabfrageanweisung. Schüler, die sich ein wenig mit CSS kann es tun Verstehen Sie, dass diese bedingte Anweisung bedeutet, dass das Stylesheet mit einer Auflösung von mehr als 320 und weniger als 479 .

Diese Aussage ist die grundlegende Anwendung des responsiven Layouts. Durch die Zuweisung verschiedener Werte kann sie auf Bildschirmen unterschiedlicher Größe angezeigt werden. Wir haben oben gelernt, was responsives Layout ist. Wie sollten wir es also in unseren tatsächlichen Projekten gestalten? ?In der Vergangenheit waren wir bei der Gestaltung von Websites von der Kompatibilität verschiedener betroffen Browser. Sexuelle Probleme, jetzt müssen wir Geräte unterschiedlicher Größe kaufen, wie sollen wir uns beruhigen ?Wenn Bedarf besteht, wird es eine Lösung geben, haha, sagte: Für ein responsives Layout muss die Medienabfrage in CSS3 erwähnt werden. Das ist eine gute Sache, einfach zu verwenden, leistungsstark und schnell...Media Query ist ein leistungsstarkes Tool zum Erstellen responsiver Layouts Mit diesem Tool können wir sehr bequem und schnell eine Vielzahl umfangreicher und praktischer Schnittstellen erstellen. Als Nächstes erfahren Sie mehr über Media Query. Definieren Sie Stylesheet-Regeln für verschiedene Medientypen und -bedingungen. Medienabfragen ermöglichen CSS, genauer auf verschiedene Medientypen und unterschiedliche Bedingungen auf demselben Medium zu reagieren. Die meisten Medieneigenschaften von Medienabfragen akzeptieren min und max, um auszudrücken, dass " größer oder gleich " ist Und " ist kleiner oder gleich. Beispiel: width hat min-width und max -width Medienabfragen können in @media und @import-Regeln in CSS verwendet werden, und kann auch in verwendet werden HTML und XML Durch dieses Tag-Attribut können wir problemlos umfangreiche Schnittstellen auf verschiedenen Geräten implementieren, Besonders auf Mobilgeräten , wird häufiger verwendet Wenn Sie also responsive Medienobjekte verwenden, müssen Sie die Meidia-Abfrage lernen

Responsives Layout ist also ein sehr gutes Designkonzept in

HTML. Responsives Layout bietet viel Komfort für alle und ermöglicht es jedem, es auf verschiedenen Geräten anzuzeigen.