[FRAGE] CSS mit Javascript für verschiedene Auflösungen ansteuern

[gruenstich64]

Hallo,

das ist leider schon meine zweite Frage heute - aber ich muss sie stellen, sonst beiße ich noch in den Tisch

Ich habe ein small.css (für eine Höhe von 768px) und ein large.css (für alles darüber).
Ein Javascript soll die Browserhöhe auslesen und das richtige CSS anwenden.
Das klappt jedoch nicht wirklich! Small.css scheint richtig angewendet zu werden, aber wenn ich die Seite in einem großen Viewport öffne, scheinen die CSS durcheinander geworfen zu werden. Das sieht man, wenn man im Browser auf "Element untersuchen" geht - einigen ist small.css und anderen large.css zugewiesen.

Was habe ich falsch gemacht bzw gibt es eine elegantere Lösung?

function adjustStyle(height) {
    height = parseInt(height);
    if (height <= 768) {
        jQuery("#size-stylesheet").attr("href", "../css/small.css");
    } else if ((height < 1080)) {
        jQuery("#size-stylesheet").attr("href", "../css/large.css");
    }
}

jQuery(function() {
    adjustStyle(jQuery(this).height());
    jQuery(window).resize(function() {
        adjustStyle(jQuery(this).height());
    });
});

Im HTML

<link rel="stylesheet" type="text/css" href="css/large.css" />
<link id="size-stylesheet" rel="stylesheet" type="text/css" href="css/small.css" />

Wäre für Hilfe sehr dankbar!

Liebe Grüße,
gruenstich64

 

[SteelWheel]

Guten Abend,

ich glaube, dass Dir (gerade auch weil jQuery) das hier weiterhelfen wird (halte die Augen nach "matchMedia" offen).

Zum Vergleich für "matchMedia": caniuse

Kühlere Nacht - und Holz schmeckt nicht ... also nicht beißen!

 

[kkapsner]

Du könntest bei deinem Ansatz auch mal probieren, was passiert, wenn du den <link> für die small.css einfach auf .disabled = true setzt.

 

[tsseh]

hat es einen grund 2 css varianten auszuliefern? warum keine media queries?