Reagiert Bootstrap?

Wenn Sie mehr über Bootstrap erfahren möchten, klicken Sie auf: Bootstrap-Tutorial

Was ist responsives Webdesign?

Responsive Webdesign ist eine Methode, die es Benutzern ermöglicht, beim Surfen auf der Website über Geräte unterschiedlicher Größe gute visuelle Effekte zu erzielen. 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.

Wie funktioniert responsives Webdesign?

Um responsives 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 Darstellungsgröße des Geräts ermittelt und gerätespezifische Stile geladen.

Eintauchen in CSS für responsives Webdesign?

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

Das Meta-Tag des Ansichtsfensters überschreibt das Standard-Ansichtsfenster und hilft beim Laden des auf das Ansichtsfenster bezogenen Stils.

Das width-Attribut 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 hinzufügen, etwa so:

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

Wenn Sie nun nach der responsiven CSS-Datei suchen, werden Sie sie finden find , nach einigen öffentlichen Erklärungen (von Zeilennummer 10 bis 22), gibt es verschiedene Bereiche, die mit „@media“ beginnen. 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, beginnend mit „@media (min-width: 768px) und (max-width: 979px)', legt Stile für Geräte mit einer Mindestbreite von 768 Pixeln und einer Maximalbreite von 979 Pixeln fest.

Der nächste Bereich besteht darin, Geräte 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 dazu, den Stil für Geräte mit einer Mindestbreite von 980 Pixeln festzulegen, und letzteres gilt für Geräte mit einem Mindestbreite von 1200 Pixel. Stil festlegen.

Daher besteht die Grundfunktion dieses Stylesheets 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.

Erklärung

Um das Layout reaktionsfähiger zu machen, führt Bootstrap drei Dinge aus:

1 . Die Breite der Spalten im Raster wurde geändert.

　2. Bei Bedarf werden Stapelelemente anstelle von schwebenden Elementen verwendet. Wenn Sie immer noch nicht wissen, was ein Stapelelement ist, kann das folgende Formular von w3.org hilfreich sein:

Das Stammelement (HTML) bildet die Wurzel des Stapelkontexts, und andere Stapelkontexte sind es auch wird aus allen positionierten Elementen generiert (einschließlich relativ positionierter Elemente, die einen berechneten Wert von „z-index“ anstelle von „auto“ haben). Der Stapelkontext ist relativ zum enthaltenden Block nicht erforderlich.

3. Geben Sie den Titel und die Textgröße korrekt wieder.

Entwickeln Sie mobilfreundliche Layouts schneller.

Bootstrap verfügt über mehrere nützliche Klassen für die Entwicklung mobilfreundlicher Layouts. Diese Klassen sind auf „responsive.less“ zu sehen.

.visible-phone, sichtbar auf Telefonen mit einer Breite von 767 Pixel und darunter, ausgeblendet auf Tablets mit einer Breite von 979 Pixel bis 768 Pixel, ausgeblendet auf Desktops, was die Standardeinstellung ist.

.visible-tablet, ausgeblendet auf Mobiltelefonen mit einer Breite von 767 Pixel und darunter, sichtbar auf Tablets mit einer Breite von 979 Pixel bis 768 Pixel, ausgeblendet auf dem Desktop, was die Standardeinstellung ist.

.visible-desktop, auf Telefonen mit einer Breite von 767 Pixel und darunter nicht sichtbar, auf Tablets mit 979 Pixel bis 768 Pixel nicht sichtbar, auf dem Desktop sichtbar, was die Standardeinstellung ist.

.hidden-phone, auf Telefonen mit einer Breite von 767 Pixel und darunter nicht sichtbar, auf Tablets mit 979 Pixel bis 768 Pixel sichtbar, auf Desktops sichtbar, dies ist die Standardeinstellung.

.hidden-tablet, sichtbar auf Telefonen mit einer Breite von 767 Pixel und darunter, ausgeblendet auf Tablets mit 979 Pixel bis 768 Pixel, sichtbar auf dem Desktop, was die Standardeinstellung ist.

.hidden-desktop, sichtbar auf Mobiltelefonen mit einer Breite von 767 Pixel und darunter, sichtbar auf Tablets mit einer Breite von 979 Pixel bis 768 Pixel, versteckt auf dem Desktop, was die Standardeinstellung ist.

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