JavascriptでWebサイトのレスポンシブ対応 #JavaScript

内容

ウィンドウサイズに応じて <body> タグにクラスを追記する
読み込み時とリサイズ時に処理を実行

test.html

<meta name="viewport" content="width=device-width, initial-scale=1">
↑ headerに入れる

<script type="text/javascript">
    $(window).on('load resize', function(){
        var x = $(window).width();
        if (x <= 906) {
            $(document.body).addClass('narrow');
            if (x <= 767) {
                $(document.body).addClass('for-tablet');
                if (x <= 479) {
                    $(document.body).addClass('for-mobile');
                } else {
                    $(document.body).removeClass('for-mobile');
                }
            } else {
                $(document.body).removeClass('for-tablet');
                $(document.body).removeClass('for-mobile');
            }
        } else {
            $(document.body).removeClass('narrow');
            $(document.body).removeClass('for-tablet');
            $(document.body).removeClass('for-mobile');
        }
    });
</script>

あとは適当にCSSへ定義していく

style.css

.hoge{
}
#タブレット・スマートフォン向け（幅７６７ｐｘ以下の場合）
.hoge .for-tablet {
}
#スマートフォン向け（幅４７９ｐｘ以下の場合）
.hoge .for-mobile {
}

cssのメディアクエリ？そんなものはなかった