Einblicke in responsive Layouts

Was das responsive Layout betrifft, glaube ich, dass jeder seine eigene Meinung hat. Einige denken, dass das responsive Layout eine Art Webseite ist, aber unser echtes responsives Layout kann entsprechend der Größe der Webseite angepasst werden . Auf der PC-Seite wird alles auf der Webseite in einer Zeile angezeigt, oder es wird in zwei Seitenspalten oder eine Seitenspalte unterteilt, und auf der PC-Seite wird es in einer Zeile angezeigt Wenn der Bildschirm kleiner wird, wird das Layout kleiner. Auf dem Mobiltelefon werden die ursprünglich vertikal angeordneten Tasten möglicherweise horizontal angeordnet ...

Dann gibt es mehrere Möglichkeiten, responsive Layouts zu schreiben:

1. Zunächst einmal sollte jeder das Wort „Media“ kennen, das auf Englisch „Medien“ bedeutet. Was kann es tun? Tatsächlich gibt es für Medien eine Anweisung, die @media screen und (min-width:) (max-width) lautet. Wenn Sie ihr unterschiedliche Werte zuweisen, kann sie auf verschiedenen Bildschirmen angezeigt werden angezeigt wird, damit sie den Effekt eines responsiven Layouts erzielen kann, aber aufgrund von Browserkompatibilitätsproblemen gibt es immer noch viele Probleme. Was soll ich tun? Derzeit sind einige andere Eigenschaften von Medien beteiligt. Kurz gesagt, Medien sind immer noch sehr leistungsfähig und können auch zur Erzielung eines reaktionsfähigen Layouts verwendet werden.

2. Zweitens besteht eine andere Implementierungsmethode für ein reaktionsfähiges Layout darin, die Breite in Prozent anzugeben. Mit dieser Art von Layout kann auch der Effekt eines reaktionsfähigen Layouts erzielt werden Obwohl diese Layoutmethode ein reaktionsfähiges Layout erreichen kann, wird sie in meiner Arbeit oder meinem Unternehmen selten empfohlen. Obwohl sie einfach ist, weist sie auch Probleme auf Die Zeiten und die Codemenge in diesem Layout sind relativ groß und optisch unansehnlich. Dies hat große Auswirkungen, wenn wir Projekte durchführen. Obwohl diese Layoutmethode einfach ist, verwenden wir derzeit nur sehr wenige Unternehmen.

3. Schließlich gibt es noch eine andere Möglichkeit, ein responsives Layout zu erstellen: Verwenden Sie col-lg- auf dem größten Bildschirm, col-sm- auf einem Tablet-Display und col-sm- auf dem kleinsten col-xs- ist anwendbar und col-md- wird für die Anzeige auf dem PC verwendet. In diesem Framework ist ein Container in zwölf Raster unterteilt. Das Raster ist für verschiedene Geräte geeignet Wenn beispielsweise zwei Klassen für ein Element verwendet werden, wird der entsprechende Stil entsprechend der Größe des Gerätebildschirms ausgewählt. Wenn die Bildschirmgröße nicht im Bereich der Klasse liegt, wird er ignoriert Klassen; jeder Stil des Zauns kann verwendet werden, um den gewünschten Effekt auf verschiedenen Geräten anzuzeigen. Es kann jedoch auch den Effekt eines responsiven Layouts erzielen Ich persönlich denke, dass der Rahmen dieses Layouts nicht sehr gut ist, aber insgesamt gibt es kein kleines Problem.

Das Obige ist meine persönliche Meinung zum Responsive-Layout. Wenn etwas nicht stimmt, geben Sie mir bitte ein paar Hinweise.