[CSS]ブラウザのサイズに合わせてスタイルシートを変更する方法

Post on:2010年4月26日

CSSで実装

「device-width」を使用して、下記のように記述します。
デモページ：CSS版

CSS

<textarea name="code" class="css" cols="60" rows="5">
<link rel='stylesheet' media='screen and (max-width: 700px)' href='css/narrow.css' />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
<link rel='stylesheet' media='screen and (min-width: 901px)' href='css/wide.css' />
</textarea>

</textarea>

対応ブラウザはFirefoxのMozilla系、Safari, ChromeのWebkit系、Operaの最新バージョンでサポートしています。
IEはIE9を含み、現在のところ非対応とのことです。

JavaScriptで実装

IEを含むすべてのブラウザに対応させたい場合は、これらの方法がおススメです。
jQueryでブラウザの幅を判別して、適したスタイルシートにします。
デモページ：JavaScript版

スクリプトはjQueryを外部ファイルで指定し、下記のスクリプトを追加します。

JavaScript

<textarea name="code" class="js" cols="60" rows="5">
function adjustStyle(width) {
    width = parseInt(width);
    if (width < 701) {
        $("#size-stylesheet").attr("href", "css/narrow.css");
    } else if ((width >= 701) && (width < 900)) {
        $("#size-stylesheet").attr("href", "css/medium.css");
    } else {
       $("#size-stylesheet").attr("href", "css/wide.css");
    }
}

$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});
</textarea>

function adjustStyle(width) {

width = parseInt(width);

if (width < 701) {

$("#size-stylesheet").attr("href", "css/narrow.css");

} else if ((width >= 701) && (width < 900)) {

$("#size-stylesheet").attr("href", "css/medium.css");

} else {

$("#size-stylesheet").attr("href", "css/wide.css");

}

$(function() {

adjustStyle($(this).width());

$(window).resize(function() {

adjustStyle($(this).width());

});

</textarea>

HTML

<textarea name="code" class="html" cols="60" rows="5">
<link rel="stylesheet" type="text/css" href="main.css" />
<link id="size-stylesheet" rel="stylesheet" type="text/css" href="narrow.css" />
</textarea>