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%');
}
}
});
サンプル
