Responsives Layout:
Responsives Design soll unterschiedliche Darstellungsmethoden zum Durchsuchen von Webseiten auf Endgeräten mit unterschiedlichen Bildschirmauflösungen erreichen. Responsive Design kann dazu beitragen, dass die Website auf Mobiltelefonen und Tablets ein besseres Surf- und Leseerlebnis bietet. Unterschiedliche Bildschirmgrößen zeigen Benutzern unterschiedliche Webseiteninhalte an. Mithilfe von Medienabfragen können wir die Größe des Bildschirms ermitteln (hauptsächlich die Breite ermitteln) und verschiedene CSS-Stile festlegen, um ein reaktionsfähiges Layout zu erzielen.
Wir verwenden ein responsives Layout, um Webinhalte auf Endgeräten unterschiedlicher Größe perfekt anzuzeigen, was die Benutzererfahrung erheblich verbessert. Um dieses Ziel zu erreichen, müssen wir jedoch viele Redundanzen für Medienabfragen verwenden Durch den zusätzlichen Code wird die gesamte Webseite größer, was bei der Anwendung auf Mobilgeräten zu ernsthaften Leistungsproblemen führt.
Responsives Layout wird häufig auf offiziellen Unternehmenswebsites, Blogs sowie Nachrichten- und Informationswebsites verwendet. Diese Websites konzentrieren sich hauptsächlich auf das Durchsuchen von Inhalten ohne komplexe Interaktionen.
Verwenden Sie das reaktionsfähige Bootstrap-Layout
Implementierungsmethode: Geben Sie das Webseitenlayout eines bestimmten Breitenbereichs an, indem Sie die Breite des Bildschirms abfragen.
Ultrakleiner Bildschirm (mobiles Gerät) mit 768 Pixeln.
Kleines Bildschirmgerät mit 768 Pixeln bis 992 Pixeln 200px 992 =< w <1200
Breitbildgeräte 1200px oder höher w>=1200
Zuerst müssen Sie das Meta-Tag im Kopf einfügen und das Viewpirt-Attribut „Breite“ hinzufügen im Inhalt entspricht der Gerätebreite, Anfangsskalierung: Die Zoomstufe des sichtbaren Bereichs, wenn die Seite zum ersten Mal angezeigt wird. Wenn der Wert 1 ist, wird die Seite in der tatsächlichen Größe ohne maximale Skalierung angezeigt. das Mindestverhältnis, auf das der Benutzer zoomen darf; vom Benutzer skalierbar: ob der Benutzer manuell zoomen kann. Der Code lautet wie folgt:
1 2 |
|
Das Folgende ist eine Seite (Anmeldeformularschnittstelle) mit Bootstrap-Layout, die auf ultrakleine Mobiltelefonbildschirme (iPhone5s) und PC-Bildschirme (>=1200 Pixel) abzielt. col-xs-12: kleiner Bildschirm belegt 12 Spalten, col-lg-5: großer Bildschirm belegt 5 Spalten, col-lg-offset-3: großer Bildschirm rückt 3 Spalten ein. Dies ist ein relativ einfaches Beispiel. Wenn Sie sich an andere Bildschirme wie Tablets anpassen möchten, können Sie das Attribut col-md-* hinzufügen, und für Telefone mit großem Bildschirm können Sie das Attribut col-sm-* hinzufügen.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
|
Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein Bootstrap-Responsive-Layout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!