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

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

Oct 22, 2024 am 06:15 AM

ey Techniques to Create Responsive Layouts So That You Don’t Have to Relying On Heavy CSS Frameworks

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">
Nach dem Login kopieren
Nach dem Login kopieren

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">
Nach dem Login kopieren
Nach dem Login kopieren

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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Hinzufügen von Kastenschatten zu WordPress -Blöcken und -Elementen Hinzufügen von Kastenschatten zu WordPress -Blöcken und -Elementen Mar 09, 2025 pm 12:53 PM

Hinzufügen von Kastenschatten zu WordPress -Blöcken und -Elementen

Erstellen Sie ein JavaScript -Kontaktformular mit dem Smart Forms Framework Erstellen Sie ein JavaScript -Kontaktformular mit dem Smart Forms Framework Mar 07, 2025 am 11:33 AM

Erstellen Sie ein JavaScript -Kontaktformular mit dem Smart Forms Framework

Erstellen Sie einen Inline -Texteditor mit dem inhaltlichen Attribut Erstellen Sie einen Inline -Texteditor mit dem inhaltlichen Attribut Mar 02, 2025 am 09:03 AM

Erstellen Sie einen Inline -Texteditor mit dem inhaltlichen Attribut

Machen Sie Ihren ersten Seltsamen -Sufle -Übergang Machen Sie Ihren ersten Seltsamen -Sufle -Übergang Mar 15, 2025 am 11:08 AM

Machen Sie Ihren ersten Seltsamen -Sufle -Übergang

Vergleich der 5 besten PHP -Formbauer (und 3 kostenlose Skripte) Vergleich der 5 besten PHP -Formbauer (und 3 kostenlose Skripte) Mar 04, 2025 am 10:22 AM

Vergleich der 5 besten PHP -Formbauer (und 3 kostenlose Skripte)

Datei hochladen mit Multer in node.js und ausdrücken Datei hochladen mit Multer in node.js und ausdrücken Mar 02, 2025 am 09:15 AM

Datei hochladen mit Multer in node.js und ausdrücken

Arbeiten mit GraphQL Caching Arbeiten mit GraphQL Caching Mar 19, 2025 am 09:36 AM

Arbeiten mit GraphQL Caching

Beste CSS -Animationen und Effekte auf Codecanyon 2025 (kostenlos bezahlt) Beste CSS -Animationen und Effekte auf Codecanyon 2025 (kostenlos bezahlt) Mar 01, 2025 am 09:32 AM

Beste CSS -Animationen und Effekte auf Codecanyon 2025 (kostenlos bezahlt)

See all articles