ey-Techniken zum Erstellen responsiver Layouts, sodass Sie sich nicht auf umfangreiche CSS-Frameworks verlassen müssen

Sie benötigen keine schweren CSS-Frameworks, um responsive Layouts zu erstellen.

CSS-Frameworks wie Tailwind und Bootstrap sind wirklich leistungsstark, aber manchmal sind sie für kleinere Websites zu viel. Sie können alle von ihnen angebotenen Funktionen in reinem CSS-Code erreichen. Unter der Haube nutzen sie alle die gleiche grundlegende Technik für responsive Websites.

Wenn Sie wirklich wissen möchten, wie diese Frameworks und responsiven Websites funktionieren, müssen Sie die fünf grundlegenden Techniken verstehen.

Hier sind die 5 Techniken, um Ihre Website responsive zu machen:

Technik Nr. 1: Konfigurieren Sie das Ansichtsfenster

Wussten Sie, dass ein einziges Meta-Tag steuern kann, wie Ihre Website auf jeder Bildschirmgröße skaliert?

Ja, dieser Meta-Tag ist Viewport.

Wenn Sie nicht wissen, was der Viewport ist, dann ist Viewport der sichtbare Bereich auf einer Webseite auf einem Gerät, egal ob Telefon, Tablet oder Desktop. Sie fragen sich vielleicht, was es bewirkt. Es bestimmt, wie Inhalte basierend auf der Bildschirmgröße des Geräts skaliert und angezeigt werden.

Da die Bildschirme in verschiedenen Größen erhältlich sind, spielt der Viewport eine entscheidende Rolle dabei, die Website responsiv zu gestalten.

Wie benutzt man es nun?

Verwenden Sie einfach das Viewport-Meta-Tag in Ihrer HTML-Datei.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Technik Nr. 2: Übernehmen Sie einen Mobile-First-Ansatz

Wenn Sie nicht mobil-first entwerfen, machen Sie es falsch.

Denn über die Hälfte des Webverkehrs kommt heute von mobilen Geräten. Und das ist der Ansatz, den Tailwind gewählt hat. Und sie bitten Sie, dasselbe zu tun. Hier geht es um die Verwendung von reinem CSS anstelle eines Frameworks, aber der Ansatz ist immer noch derselbe.

Der Mobile-First-Ansatz hilft längerfristig, da Sie mehrere Versionen desselben Codes für verschiedene Gerätetypen schreiben müssen.

Technik Nr. 3: Nutzen Sie CSS Grid und Flexbox

Verwenden Sie immer noch das Float-basierte Layout für Ihre Website?

Ich hoffe, dass das nicht der Fall ist. Und wenn Sie es immer noch verwenden, ist es an der Zeit, auf Flexbox und CSS Grid umzusteigen, da es sich dabei um leistungsstarke Tools zum Erstellen flexibler Layouts handelt.

Wenn Sie ein eindimensionales Layout erstellen müssen, entscheiden Sie sich für Flexbox

Und wenn Sie ein zweidimensionales Layout erstellen müssen, dann entscheiden Sie sich für Raster

Technik Nr. 4: Erstellen Sie flüssige Layouts

Verwenden Sie überall auf Ihrer Website feste Pixelwerte?

Die meisten Entwickler entscheiden sich für den Pixelwert (px), wenn sie die verschiedenen Layouts auf dem Bildschirm entwickeln. Pixelwerte sind für feste Layouts gut, für responsive Layouts jedoch nicht so gut. Wenn Sie ein fließendes Layout wie einen prozentualen Wert verwenden, wird die Größe Ihres Layouts bei jeder Ansichtsfenstergröße reibungslos angepasst.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Technik Nr. 5: Setzen Sie Medienabfragen mit Bedacht ein

Medienabfragen sind eine weitere hilfreiche Technik zum Erstellen responsiver Layouts

Aber es muss mit Bedacht eingesetzt werden. Es werden unterschiedliche Haltepunkte für unterschiedliche Layouts verwendet. Die meisten Entwickler machen damit einen Fehler. Sie beginnen mit der Erstellung für alle möglichen Bildschirmgrößen, was zu unüberschaubarem Code führt.

In meinem Vorschlag sollten Medienabfragen zu wichtigen Übergängen zwischen Gerätekategorien durchgeführt werden. Für z.B. Vom Mobilgerät zum Tablet, vom Tablet zum Desktop.

~

Also gut, wie Sie sehen, stehen mehrere Techniken zur Verfügung, um Ihre Website responsiv zu gestalten. Auf dem Papier sieht es so aus, als wären fünf verschiedene Techniken einsatzbereit, aber in der Praxis werden Sie, wenn Sie mit der Arbeit an einer Produktionswebsite beginnen, den Anwendungsfall all dieser Techniken erkennen.

Jetzt erstellen Sie eine responsive Website und lassen Sie mich wissen, was Sie am besten verwendet haben.

Wenn Ihnen die Lektüre gefallen hat, folgen Sie mir auf Twitter/X, um mehr zu lesen.

Das obige ist der detaillierte Inhalt voney-Techniken zum Erstellen responsiver Layouts, sodass Sie sich nicht auf umfangreiche CSS-Frameworks verlassen müssen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!