CSS3 のメディアクエリと rem レイアウトを組み合わせてモバイル画面に適応

@media 画面のみで (最小幅: 320px) かつ (最大幅: 479px) {
    html{
        フォントサイズ: 42.67px !重要;
    }
}
@media 画面のみで (最小幅: 480px) かつ (最大幅: 639px) {
    html{
        フォントサイズ: 64px !重要;
    }
}
@media 画面のみで (最小幅: 640px) かつ (最大幅: 749px) {
    html{
        フォントサイズ: 85.34px !重要;
    }
}
@media 画面のみで (最小幅: 750px) かつ (最大幅: 959px) {
    html{
        フォントサイズ: 100px !重要;
    }
}
@media 画面のみで (最小幅: 960px) かつ (最大幅: 1241px) {
    html{
        フォントサイズ: 128px !重要;
    }
}
@media 画面のみで (min-width: 1242px) {
    html{
        フォントサイズ: 165.6px !重要;
    }
}

(zepto/jQuery) (750px デザインの場合、1rem = 100px)
関数setFont() {
    window_width を window.innerWidth とします。
    font_size = parseFloat(window_width / 3.75); とします。
    $('html').css('フォントサイズ', font_size);
}

$(window).on('resize', 関数() {
    フォントを設定する();
});