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

ブラウザのウインドウサイズに合わせて、スタイルシートを変更し、レイアウトを最適化する方法をCSS-Tricksから紹介します。

Different Stylesheets for Differently Sized Browser Windows

デモではブラウザのサイズを変更すると、それに応じてレイアウトが変わります。

デモページ（Wide Layout）

デモページ（Medium Layout）

デモページ（Narrow Layout）

サイズに合わせてスタイルシートを変更する方法は、二種類が紹介されています。

• CSSで実装
• JavaScriptで実装

CSSで実装

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

CSS

<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' />

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

JavaScriptで実装

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

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

JavaScript

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());
    });
});

HTML

<link rel="stylesheet" type="text/css" href="main.css" />
<link id="size-stylesheet" rel="stylesheet" type="text/css" href="narrow.css" />