Wie man eine Zwei-Säulen-Website Layout Mobilfreundlich ()
Vorrundenspiele
Ihr bestehender Zwei-Säulen-CSS-Code spielt keine Rolle (Much)
Die erste Art der HTML-Struktur: Inhalt Erste
Mit anderen Worten, für die von Ihnen mit dieser Art von Struktur ist die Lösung denkbar einfach.
Für diejenigen, die alles in einer einzigen Datei setzen möchten, hier ist die gleiche Sache gesammelt zusammen in einem Stylesheet:
Der obige Code geschieht das CSS in meinem zweispaltigen Tutorial beschrieben verwenden, um die Spalten zu erstellen, aber Sie können Ihren eigenen 2-Säulen-Code an seiner Stelle immer ersetzen.
Browser-Kompatibilität. Wenn Sie Ihre CSS auf diese Weise kodieren, was Menschen, die sehen alten Web-Browser verwenden? Mit „alten Browsern“, ich meine Versionen von Browsern, die die Medien-Anfragen Einrichtung nicht implementieren.
Jeder mit einem Mobiltelefon-Browser, ob alt oder neu, wird das einzelne Spalten-Layout erhalten.
Jeder hat einen modernen Desktop-Browser das zweispaltige Layout erhalten.
Jeder einen alten Desktop-Browser die einzelnen Spalten-Layout erhalten.
Da die zwei Spalte Code innerhalb eines Satzes von Medienanfragen Bedingungen nicht eingeschlossen ist, gilt es am Anfang zu allen Browsern. Dann, wenn ein mobiler Browser, um das Medienanfragen Abschnitt trifft, wird es die zusätzliche Regeln in diesem Abschnitt gilt. Da die #content und #navbar div Blöcke sind bereits aus dem Dokumentenfluss von dieser Zeit schwebt dank des früheren zweispaltigen Code haben die neuen Regeln alles rückgängig zu machen. Er tut dies, indem float: keinen Schwimmer rückgängig zu machen: rechts. und Breite: 100% der Breite Einstellungen von 80% und 20% auf der Rückseite.
Der Effekt der CSS-Regeln auf diese Weise ist das Schreiben auf Browser-Kompatibilität beeinflussen somit:
Jeder mit einem Desktop-Browser, ob alt oder neu, die zwei Spalten-Layout erhalten.
Jeder hat einen modernen mobilen Browser wird eine einspaltige Layout erhalten.
Jeder einen alten mobilen Browser wird eine zweispaltige Layout erhalten.
Die zweite Art der HTML-Struktur und wie ein DIV-Block Ignorieren HTML zu bewegen,
Was passiert, wenn Ihre HTML ist wie folgt aufgebaut?
In einem solchen Fall, die Sie nicht wollen das mobile Layout der HTML-Reihenfolge zu folgen, da das erste, was ein Besucher sehen das Navigationsmenü und nicht der Inhalt ist. Sie müssen einen Weg den zweiten DIV-Block zu bewegen, so dass sie vor dem ersten präsentiert werden.
Das Problem ist, dass, um diese leicht zu lösen, können Sie die neue flexible Box CSS Einrichtungen (oder „flex-Box“ / „Flexbox“, wie es allgemein bekannt ist) verwendet werden müssen, die nur zuverlässig in modernen Browsern implementiert sind. Und wenn ich modernen Browser sage, meine ich Versionen, die sogar neuer als die Liste, die ich für Medienanfragen Unterstützung angegeben. Zum Beispiel erfordert meine einfache Flexbox Demo Web-Seite, zumindest die folgenden Browser-Versionen:
Desktop-Browser: Internet Explorer ( "IE") 11, Microsoft Edge, 28 Firefox oder höher, Chrome 29 oder höher, Safari 9 oder höher, Opera 12.1x (Presto), Opera 17 (Webkit / Blink) oder höher.
Mobile Browser: Safari (iOS-Version) 9.2 oder höher, Android 4.4 oder höher, Blackberry 10, Opera Mobile 12.1 oder höher oder Internet Explorer Mobile 11.
Lassen Sie uns den Code sezieren.
Auf Auflösungen unterhalb 630 Pixel, I Flex-flow: Säule. die beiliegenden DIV Blöcke Anordnen vertikal statt horizontal. Da ich #content wollen in einem solchen Fall zuerst kommen, gebe ich es Reihenfolge: 1. und stellen Sie den anderen Block zu bestellen: 2. Ja, es ist so einfach: Sie setzen die Reihenfolge der Blöcke, indem sie einfach einen numerischen Wert zu geben . Und 1 kommt vor 2, die vor 3 kommt, und so weiter.
Es gibt eine andere Einrichtung, die ich von der Flexbox Familie von Regeln verwenden: align-Artikel: Stretch. Beachten Sie, dass die Navigationsleiste in der Flex-Box Demo hat die gleiche Höhe wie der Inhalt eines in den beiden Spalten-Modus, auch wenn ich nicht Pad, das Spalte mit Leerzeilen tat noch habe ich einige hässliche CSS Hack verwenden, um es zu erreichen. Diese align-Elemente: Stretch Regel bewirkt, dass der Browser den Block recken, so daß die Höhen des Kind DIVs gleich sind in Flex-flow: Zeilenmodus und die Breiten sind gleich in der Flex-flow: Spaltenmodus.
Nächstes Kapitel
Es wird, wie auf der Seite erscheinen: