Was ist Bootstrap-Responsive?

Reaktionsfähigkeit bedeutet, dass dieselbe Seite bei unterschiedlichen Bildschirmgrößen unterschiedliche Layouts hat und mit Geräten unterschiedlicher Auflösung kompatibel sein kann. Das Responsive Webdesign ermöglicht Benutzern das Durchsuchen der Website auf Geräten unterschiedlicher Größe, um ein gutes visuelles Erlebnis zu erzielen Dieser Effekt kann durch die Verwendung eines Rastersystems und die Unterteilung einer Reihe in 12 Raster erzielt werden.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Bootstrap-Version 5, DELL G3-Computer Kompatibel mit Geräten mit unterschiedlicher Auflösung

Die traditionelle Entwicklungsmethode besteht darin, einen Satz für den PC und einen anderen Satz für Mobiltelefone zu entwickeln. Bei Verwendung eines responsiven Layouts reicht jedoch nur ein Satz aus. Der Nachteil ist, dass CSS relativ schwer ist.

Implementierung: Verlassen Sie sich auf das Rastersystem, teilen Sie eine Zeile gleichmäßig in 12 Raster auf und Sie können angeben, wie viele Raster ein Element einnimmt.

Was ist responsives Webdesign? Responsive Webdesign ist ein System, das Benutzern die Navigation ermöglicht durch verschiedene Größen Möglichkeiten für eine gute visuelle Darstellung beim Durchsuchen von Websites auf Ihrem Gerät. Sie durchsuchen beispielsweise eine Website zuerst auf einem Computermonitor und dann auf einem Smartphone. Die Bildschirmgröße des Smartphones ist viel kleiner als die des Computermonitors, aber Sie spüren keinen Unterschied in der Benutzererfahrung fast das Gleiche, was bedeutet, dass die Website beim Responsive Design großartige Arbeit geleistet hat.

Wir haben Responsivität in unsere Beispiele für flüssige Layouts integriert und laden Sie ein, sie auf verschiedenen Bildschirmgrößen zu durchsuchen. Sie können die Größe Ihres Browsers mit der Window Resize-Erweiterung für Chrome oder Firefox ändern.

Wie Responsive Webdesign funktioniert

Um Responsive Webdesign anzuwenden, müssen Sie ein CSS erstellen, das Stile enthält, die sich an verschiedene Gerätegrößen anpassen. Sobald eine Seite mithilfe verschiedener Schriftarten und Webentwicklungstechniken wie Medienabfragen auf ein bestimmtes Gerät geladen wird, wird zunächst die Größe des Ansichtsfensters des Geräts ermittelt und gerätespezifische Stile geladen.

Eingehendes Studium von CSS für responsives Webdesign

Wir lernen die Nuancen kennen, wie „responsives Design“ erreicht wird, indem wir „bootstrap-responsive.css“ studieren. Zuvor müssen Sie die folgende Codezeile zum Kopfbereich der Webseite hinzufügen:

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

Das Meta-Tag des Ansichtsfensters überschreibt das Standard-Ansichtsfenster und hilft beim Laden von Stilen, die sich auf das jeweilige Ansichtsfenster beziehen. Das Attribut „width“ legt die Bildschirmbreite fest. Es enthält einen Wert wie 320 für 320 Pixel oder „Gerätebreite“, um den Browser anzuweisen, die native Auflösung zu verwenden.

Die Eigenschaft „Anfangsmaßstab“ ist der Anfangsmaßstab des Ansichtsfensters. Bei der Einstellung 1,0 wird die native Breite des Geräts gerendert.

Natürlich müssen Sie das responsive CSS von Bootstrap wie unten gezeigt hinzufügen:

<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

Wenn Sie nun nach der responsiven CSS-Datei suchen, werden Sie feststellen, dass nach einigen öffentlichen Erklärungen (von Zeile 10 bis 22) verschiedene Felder vorhanden sind beginnend mit „@media“. So schreiben Sie Stile, die auf einer Vielzahl von Geräten funktionieren.

Der erste Bereich beginnt mit „@media (max-width: 480px)“ und legt Stile für Geräte mit einer maximalen Breite von 480 Pixeln fest.

Der zweite Bereich beginnt mit „@media (max-width: 767px)“ und legt Stile für Geräte mit einer maximalen Breite von 767 Pixeln fest.

Der dritte Bereich beginnt mit „@media (min-width: 768px) und (max-width: 979px)“, um Stile für Geräte mit einer Mindestbreite von 768 Pixeln und einer Maximalbreite von 979 Pixeln festzulegen.

Der nächste Bereich besteht darin, das Gerät mit einer maximalen Breite von 979 Pixeln zu gestalten. Es beginnt also mit „@media (max-width: 979px)“.

Die letzten beiden Bereiche beginnen mit „@media (min-width: 980px)“ bzw. „@media (min-width: 1200px)“. Ersteres dient zum Festlegen von Stilen für Geräte mit einer Mindestbreite von 980 Pixeln Letzteres dient zum Festlegen von Stilen für Geräte mit einer Mindestbreite von 1200 Pixeln.

Die Grundfunktion dieses Stylesheets besteht also darin, den zu verwendenden Stil basierend auf der maximalen und minimalen Breite des Geräts mithilfe der Attribute „min-width“ und „max-width“ zu bestimmen.

Verwandte Empfehlungen:

Bootstrap-Tutorial

Das obige ist der detaillierte Inhalt vonWas ist Bootstrap-Responsive?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!