Angesichts der Beliebtheit mobiler Geräte ist es zu einem unvermeidlichen Problem geworden, Benutzern das Durchsuchen Ihrer Website über mobile Geräte zu ermöglichen, um gute visuelle Effekte zu erzielen. Responsive Webdesign ist ein effektiver Weg, dies zu erreichen.
Responsive Webdesign ist eine Methode, die es Benutzern ermöglicht, beim Surfen auf einer Website auf Geräten unterschiedlicher Größe gute visuelle Effekte zu erzielen. (Empfohlenes Lernen: Bootstrap-Video-Tutorial)
Sie durchsuchen beispielsweise zuerst eine Website auf einem Computermonitor und dann auf einem Smartphone. Die Bildschirmgröße des Smartphones ist viel kleiner Der Computermonitor, aber Sie spüren keinen Unterschied. Die Benutzererfahrung ist bei beiden fast gleich, was zeigt, dass diese Website gute Arbeit im Responsive Design geleistet hat.
Wir haben Reaktionsfähigkeit in unser flüssiges Layout implementiert und laden Sie ein, es auf verschiedenen Bildschirmgrößen zu durchsuchen. Sie können die Größe Ihres Browsers mit der Erweiterung „Window Resize“ für Chrome oder Firefox ändern.
So 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 Größe des Ansichtsfensters des Geräts ermittelt und gerätespezifische Stile geladen.
Sie müssen 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 mit dem Laden von Stilen, die einem bestimmten Ansichtsfenster zugeordnet sind.
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 reaktionsfähige CSS von Bootstrap hinzufügen, wie unten gezeigt:
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
Die Reaktionsfähigkeit von BootStrap basiert auf seinem Rastersystem, indem verschiedene Steuerelemente eingerichtet werden, wie z. B. col-(sm /md /ls/xl)-(1/2/3/4/5/6/7/8/9/10/11/12), um unterschiedliche Layouteffekte in verschiedenen Anzeigebereichen zu erzielen und ein reaktionsfähiges Layout zu erreichen.
Erklärung
Um das Layout reaktionsfähiger zu machen, führt Bootstrap drei Dinge aus:
1. Ändern Sie die Breite der Spalten im Raster .
2. Bei Bedarf werden Stapelelemente anstelle von schwebenden Elementen verwendet. Wenn Sie immer noch nicht wissen, was ein Stack-Element ist, kann das folgende Formular von w3.org hilfreich sein: Das
Root-Element (HTML) bildet die Wurzel des Stack-Kontexts, und andere Stack-Kontexte sind es auch generiert aus willkürlich positionierten Elementen (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 Titel und Text korrekt mit ihren Abmessungen wieder.
Weitere technische Artikel zu Bootstrap finden Sie in der Spalte Bootstrap-Tutorial.
Das obige ist der detaillierte Inhalt vonSo implementieren Sie Reaktionsfähigkeit im Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
