Der Begriff Responsive Web Designing entspricht der Strategie, eine Website abhängig vom Gerät zu verhalten, auf dem sie angezeigt wird. Zum Beispiel können Sie eine Website ihr Verhalten entsprechend der Bildschirmbreite, Auflösung, Orientierung usw. ändern. Ein reaktionsschnelles Webdesign macht eine Website dynamisch in der Natur.

Wenn Sie Ihre Website reaktionsschnell machen, müssen für jedes neue Gerät, das auf dem Markt entsteht, nicht immer wieder dieselbe Website entwickeln. Die Website würde ihr Verhalten automatisch auf der Grundlage des Wunsches des Benutzers ändern. Mit dieser Reaktionsfähigkeit wird die Website ihr Erscheinungsbild ändern, wenn der Benutzer die Nutzung der Website auf einem Desktop zu einem Handy wechselt.

Jetzt wissen wir, was eine reaktionsschnelle Website ist. Die nächste große Frage ist, wie man eine generiert. Betrachten Sie den nächsten Abschnitt, um die Antwort auf diese Frage zu untersuchen.

So reagieren Sie Ihr Webdesign

Wenn Sie eine Website reagieren, müssen Sie Ihre Elemente wie Text, Bilder usw. flexibel machen, indem bestimmte Layouts verwendet werden. Im Folgenden haben wir Ihnen verschiedene Entitäten gezeigt, die Ihre Webseite reaktionsschnell machen.

1. Ansichtsfenster

Die erste und die wichtigste Sache, die Sie in Ihre Quellcode -Datei aufnehmen sollten, um Ihre Webseite reaktionsschnell zu machen, besteht darin, ein reaktionsschnelles Meta -Tag hinzuzufügen.

In diesem Tag wird die Breite auf die Gerätebreite eingestellt, was bedeutet, dass sich die Webseitenbreite in der Korrespondenz auf die Breite des Geräts ändert, während die anfängliche Skala auf 1 eingestellt ist, sodass die Webseite vom Browser geladen wird Zum ersten Mal wird der Zoom -Level 1 sein. Dieses Tag befiehlt im Grunde genommen den Browser, die Messungen einer Webseite gemäß verschiedenen Situationen anzupassen.

2. Medien-Anfragen

Mit CSS Media -Abfragen können Sie das Erscheinungsbild der Webstruktur je nach Art des Geräts ändern, das die Website wie Desktops, Telefone, Laptops usw. anzeigt, und als nützlich für die Gestaltung reaktionsschneller Websites als nützlich sein. Darüber hinaus können diese verwendet werden.

Diese Abfragen verwenden bestimmte Haltepunkte, die als Punkte bezeichnet werden, auf die das Layout einer Website der Bildschirmgröße des Gerätetyps entspricht.

Syntax

@media nicht | nur Medientyp und (Medienfunktion und | oder nicht Medienfunktion)

//Code;

Schlüsselwörter erklärt

• nicht: Es kehrt die Semantik einer Medienfrage um.
• nur: Es verhindert, dass die alten Versionen eines Browsers die Medienabfrage implementieren.
• Und: Es kombiniert einen Medientyp mit einer bestimmten Medienfunktion.

Lassen Sie uns nun ein Beispiel dafür untersuchen, wie Sie Ihre Webseite mithilfe von Medienabfragen reagieren.

Beispiel
Im Folgenden demonstrieren wir eine Medienanfrage.

Html

Hallo Welt!

Hier haben wir eine definiert

Element und platzierte einen Text darin.

CSS

H1
Schriftfamilie: 'Times New Roman', Times, Serif;

@media Bildschirm und (Min-Width: 720px)
H1
Schriftfamilie: Verdana, Genf, Tahoma, Sans-Serif;

Im obigen Code ist die anfängliche Schriftfamilie des Absatzes auf Times New Roman eingestellt, während nach der Anwendung der Medienabfrage, bei der wir angegeben haben Wechsel zu Verdana. Gröze die Größe Ihres Browserfensters, um den Effekt der Medienabfrage zu sehen.

Ausgang
Wenn die geringste Bildschirmbreite 720px oder breiter ist.

Wenn die minimale Bildschirmbreite weniger als 720px beträgt.

Die Medienabfrage funktioniert ordnungsgemäß.

3. Flexbox

CSS Flexbox ist ein Layoutmodell, das eine effiziente und dynamische Anordnung von Elementen ermöglicht. Dieses Layout ist eindimensional, das die Platzierung von Elementen in einem Container mit gleichem verteilten Raum ermöglicht. In diesem Layout reagieren Elemente, was bedeutet, dass die Elemente ihr Verhalten entsprechend der Art von Gerät ändern, die sie anzeigen. Es macht Elemente flexibel und bietet ihnen eine angemessene Position und Symmetrie.

Eine Flexbox besteht aus den folgenden Komponenten; A Flex -Behälter und ein Flex Artikel. Ein Flex-Behälter definiert die Eigenschaften des Vorfahrelements, indem er seine Anzeige auf Blex oder Inline-Flex festlegt. In der Zwischenzeit beschreibt ein Flex -Element die Eigenschaften der Nachfolgerelemente und es kann zahlreiche Elemente in einem Flex -Behälter vorhanden sein.

Darüber hinaus gibt es eine Reihe von Eigenschaften, die mit einer Flexbox verbunden sind, die dazu beitragen, dass ein Webdesign reaktionsschnell ist. Hier zeigen wir Ihnen, wie Sie eine Flexbox verwenden können, um Ihre Website reaktionsschnell zu machen.

Beispiel
Im folgenden Beispiel haben wir gezeigt, wie Sie mit Flexbox ein reaktionsschnelles Bildnetz generieren können.

Html

Um ein Bildgitter zu erstellen, machen wir ein größeres Div -Element und nisten zwei Div -Elemente in dieser größeren Div. Beide verschachtelten DIV -Elemente nisten jeweils drei Bilder.

CSS

.Container
Anzeige: Flex;
Flex-Wrap: Wrap;
Polsterung: 5px;

Die DIV mit der "Container" -Klasse wird als Flexbox angezeigt und erhielt bestimmte Polsterung. Darüber hinaus wird der Flex-Wrap-Eigenschaft ein Wrap-Wert zugewiesen, was bedeutet, dass die Bilder bei Bedarf in den Container gewickelt werden.

CSS

.Spalten img
Breite: 100%;

.Säulen
Flex: 50%;
Max-Breite: 50%;
Polsterung: 5px;

Die Bilder wurden 100% Breite, so dass sie angemessen in den Container passen. Darüber hinaus erstellen wir mit dem Flex und der maximalen Breite zwei Spalten, die nebeneinander platziert werden.

CSS

@media (max-Width: 600px)
.Säulen
Flex: 100%;
Max-Breite: 100%;

Zusammen mit der Flexbox verwenden wir auch Medienabfrage. Die obige Medienabfrage gibt an, dass, wenn die Breite geringer ist als die angegeben.

Ausgang
Skalieren Sie Ihr Browserfenster nach oben und unten, um den Effekt zu sehen.

Es wurde ein reaktionsschnelles Bildnetz erstellt.

4. Bootstrap

Es ist ein CSS-Framework, mit dem seine Benutzer Websites erstellen können, die in der Natur reagieren und einen mobilen Ansatz haben. Dieser Ansatz gibt an, dass das Webdesign zuerst für Mobiltelefone und später für andere Geräte entwickelt wurde. Hier werden wir demonstrieren, wie man eine Navigationsleiste erstellt, die in der Natur mit Bootstrap reagiert.

Beispiel
Wir verwenden die neueste Version von Bootstrap, die Bootstrap 5 ist, um eine Navigationsleiste zu erstellen.

Html

Zunächst einmal zur Verwendung von Bootstrap 5 enthalten CDN für CSS und JavaScript in Ihrer HTML -Datei, wie wir oben gezeigt haben.

Html

Im obigen Code haben wir eine Navigationsleiste mit verschiedenen Bootstrap 5 -Klassen erstellt. Der .Navillat Der Unterricht wird verwendet, um eine Navigationsleiste zusammen mitzuwickeln .Navbar-Expand-SM Klasse für reaktionsschnelles Zusammenbruch. Inzwischen die .BG-Success Und .Navi-Dark sind die verschiedenen Farbschemata, die in der Navigationsleiste bereitgestellt werden.

Der .Container Die Klasse wickelt alle Elemente einer Navigationsleiste mit einer festen Breite ein. Inzwischen die .Navi-nav Die Klasse wird verwendet, um eine Navigationsleiste mit einer maximalen Höhe zu erstellen und leicht zu sein und auch Dropdowns unterstützt.

Der .NAV-ITEM, Und .Nav-Link werden verwendet, um verschiedene Listenelemente in der Navigationsleiste zu erstellen, und die .aktiv Klasse macht einen Link aktiv.

Ausgang

Eine reaktionsschnelle Navigationsleiste wurde erfolgreich erzeugt.

Abschluss

Responsive Web Designing entspricht der Strategie, eine Website abhängig von dem Gerät zu verändern, auf dem sie angezeigt wird. Wenn Sie Ihre Website reaktionsschnell machen, müssen für jedes neue Gerät, das auf dem Markt entsteht, nicht immer wieder dieselbe Website entwickeln. Eine solche Website kann unter Verwendung verschiedener Entitäten entwickelt werden, z. Hier in diesem Artikel haben wir Ihnen verschiedene Techniken gezeigt, mit denen Sie Ihre Website reaktionsschnell machen können.