jQuery 画面幅に応じてCSSを切り替える

ブラウザの画面幅に合わせて単純にCSSを切り替える

外部CSSを切り替えるほどでもなく、画面幅に応じて一部のCSSの設定を切り替える。

jQuery

$(function () { $(document).ready(switching); // リサイズ時 $(window).resize(switching); function switching(){ var body_width = $('body').width(); if (body_width <= 320) { $('body').removeAttr('style').css('font-size', '77%'); } else if (body_width <= 480) { $('body').removeAttr('style').css('font-size', '85%'); } else if (body_width <= 640) { $('body').removeAttr('style').css('font-size', '93%'); } else { $('body').removeAttr('style').css('font-size', '100%'); } } });

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。
主にLAPP環境でPHPを書いています。
最近はjQueryをよく書いています。