Medienabfrage kombiniert mit Rem-Layout in CSS3 zur Anpassung an mobile Bildschirme

@media only screen und (min-width: 320px) und (max-width: 479px) {
    html {
        Schriftgröße: 42,67px !wichtig;
    }
}
@media only screen und (min-width: 480px) und (max-width: 639px) {
    html {
        Schriftgröße: 64px !wichtig;
    }
}
@media only screen und (min-width: 640px) und (max-width: 749px) {
    html {
        Schriftgröße: 85,34px !wichtig;
    }
}
@media only screen und (min-width: 750px) und (max-width: 959px) {
    html {
        Schriftgröße: 100px !wichtig;
    }
}
@media only screen und (min-width: 960px) und (max-width: 1241px) {
    html {
        Schriftgröße: 128px !wichtig;
    }
}
@media only screen und (Mindestbreite: 1242px) {
    html {
        Schriftgröße: 165,6px !wichtig;
    }
}

(zepto/jQuery) (1rem = 100px für ein 750px-Design)
Funktion setFont() {
    let window_width = window.innerWidth;
    let font_size = parseFloat(window_width / 3.75);
    $('html').css('Schriftgröße', Schriftgröße);
}

$(window).on('Größe ändern', Funktion () {
    setFont();
});