Ich bin auf der Suche nach einer browserübergreifenden Möglichkeit, unterschiedliche Positionen und Anzeigereihenfolge für Elemente basierend auf der Bildschirmgröße festzulegen und gleichzeitig die ursprüngliche DOM-Reihenfolge beizubehalten. Die Elemente sind zunächst in separaten Containern und Standard-Wege wie float/clear in Medien-Abfragen würde wahrscheinlich nicht ausreichen.Elemente in verschiedenen Containern basierend auf der Bildschirmgröße neu anordnen
Auch wäre es schön, wenn es reine CSS-Lösung wäre.
Diese Geige verwendet Javascript, um das DOM beim Laden und Ändern der Größe zu manipulieren, was unerwünscht ist.
https://jsfiddle.net/168y076w/
HTML:
<body>
<div id="header">HEADER</div>
<div id="left_column">
<div id="left_box_1">LEFT BOX 1</div>
<div id="left_box_2">LEFT BOX 2</div>
</div>
<div id="main_content_holder_for_big_devices"></div>
<div id="right_column">
<div id="right_box_1">RIGHT BOX 1</div>
<div id="main_content_holder_for_small_devices">
<div id="mid_column">MID COLUMN</div>
</div>
<div id="right_box_2">RIGHT BOX 2</div>
</div>
</body>
CSS:
#header {
width: 100%;
height: 80px;
background: red;
}
#mid_column {
background: aqua;
height: 60px;
}
#left_box_1, #left_box_2 {
background: blue;
height: 40px;
}
#right_box_1 {
background: yellow;
height: 40px;
}
#right_box_2 {
background: purple;
height: 40px;
}
@media screen and (min-width: 600px) {
body {
width: 600px;
}
#left_column, #mid_column, #right_column {
float: left;
}
#left_box_1, #left_box_2, #right_box_1, #right_box_2 {
width: 150px;
}
#mid_column {
width:300px;
background: aqua;
}
}
Javascript:
const SMALL_DEVICE_WIDTH = 600;
var $holder_for_small = $("#main_content_holder_for_small_devices");
var $holder_for_big = $("#main_content_holder_for_big_devices");
window.addEventListener("resize", move_content_in_dom);
window.addEventListener("load", move_content_in_dom);
function move_content_in_dom() {
var w = window.innerWidth;
if(w < SMALL_DEVICE_WIDTH) {
if($holder_for_big.html() !== "") {
$holder_for_small.html($holder_for_big.html());
$holder_for_big.html("");
}
} else {
if($holder_for_small.html() !== "") {
$holder_for_big.html($holder_for_small.html());
$holder_for_small.html("");
}
}
}
Dieses Bild zeigt das Layout ich erreichen möchte. Auf kleinen Geräten wie Handys, nach Kopfzeile oben, möchte ich die Boxen aus der linken Spalte haben, nach ihnen Ich möchte eine Box aus der rechten Spalte, danach den Hauptinhalt, und danach eine andere Box aus der rechten Spalte.
ich eine Antwort bin der Hoffnung, dass mir die richtigen Werkzeuge geben würde, so dass ich das Rad nicht neu erfinden.
Eigentlich glaube ich, ich habe es gerade mit absoluter Positionierung und Floating getan. Getestet erfolgreich in Chrome, Firefox, Opera, Vivaldi und IE 11 unter Windows; Chromium und Firefox unter Linux; Chrome und Android Browser auf Android. Auf IE8 fehlgeschlagen, da die Unterstützung von Medienabfragen fehlte. Daher habe ich einem bedingten Kommentar Stile hinzugefügt, die Stile für große Bildschirme in IE <9 erzwingen (niemand, der sie verwendet, benötigt sowieso eine Antwort). http://codepen.io/anon/pen/vGbYeK?editors=0100 – Lukas
Cool, gute Arbeit!Beachten Sie, dass Ihre Frage war "Elemente in verschiedenen Containern basierend auf der Bildschirmgröße neu anordnen", und in Ihrer Lösung, Sie nur in den gleichen Container ("Right_column"), so dass es möglicherweise nicht genau das, was Sie wollen, wenn Sie beginnen hinzufügen Inhalt. Aber, viel Glück! –
Wahr. Die Frage lautete ursprünglich "Hauptinhalt zwischen Zeilen aus der Seitenspalte (nur für kleine Geräte)", und sie war so spezifisch, dass sich Leute über mich lustig machten und fragten, ob sie mir eine Paypal-Adresse schicken sollten Verringerung der Eindeutigkeit. – Lukas