[JS]IE6でもブラウザのサイズに合わせて最適なスタイルシートを適用するスクリプト -Adapt.js

CSS3のMedia Queriesを使用して同様のことができますが、CSS3非対応ブラウザでも動作し、且つjQueryなど他のスクリプトに依存しないでブラウザの幅をチェックし、そのサイズに最適化されたスタイルシートのみをロードさせる超軽量（894bytes）のスクリプトを紹介します。

Adapt.js - Adaptive CSS
左：ファイル名、右：スクリーンサイズ

[ad#ad-2]

スクリプトの制作は「960 Grid System」と同じNathan Smith氏なので、960 Grid Systemとの相性がよいのではないでしょうか。
また、対応ブラウザの表記は見あたりませんでしたが、IE6でも動作しました。

スクリプトでは、上記キャプチャのようにサイズごとに異なるスタイルシートを指定し、ユーザーの環境に合わせて最適なレイアウトで表示することができます。

下記は、同サイトをブラウザのサイズを変更して表示したものです。

1024x768で表示

800x600で表示

640x480で表示

[ad#ad-2]

Adapt.jsの実装

使い方は簡単で、「range」に最初は最小値から、最後に最大値を指定し、その間に「to」を使用してサイズを想定し、それぞれのスタイルシートファイルを指定します。
スタイルシートのパスは、「path」で指定します。

スタイルシートの読み込むタイミングは、初回時のみ、リサイズ時、の二つに対応しており、「dynamic」で指定します。

JavaScript

// Edit to suit your needs.
var ADAPT_CONFIG = {
  // Where is your CSS?
  path: 'assets/css/',

  // false = Only run once, when page first loads.
  // true = Change on window resize and page tilt.
  dynamic: true,

  // First range entry is the minimum.
  // Last range entry is the maximum.
  // Should have at least one "to" range.
  range: [
    '760px            = mobile.css',
    '760px  to 960px  = 720.css',
    '960px  to 1280px = 960.css',
    '1280px to 1600px = 1200.css',
    '1600px to 1920px = 1560.css',
    '1920px           = fluid.css'
  ]
};

スクリプトの利用は無料で、ライセンスはGPL, MIT Licenseです。