altclass - 幅によってクラスを変更するJavaScriptライブラリ
レスポンシブWebデザインの面倒なところは同じような設定が散見されることではないでしょうか。上の方で幅の定義があるものの、実際のクラス定義はどの幅に対するものなのか分かりづらいことがあります。 そこで使ってみたいのがaltclassです。JavaScriptを使いますが、幅によってクラスを付け替えてくれる便利なライブラリです。
altclassの使い方
ブレークポイントは設定を使って自由に指定できます。
<div data-altclass="[less than 320] 320 [at least 320 & up to 479] 480 [at least 480]">
altclassは幅の変化を見てクラスの付け替えを行っています。スタイルシート側は widget-* というクラスを使って表示/非表示を切り替えると言った具合です。JavaScriptが有効でないと使えない点は難点ですが、スタイルシートはこちらの方が分かりやすく書けるような気がします。
altclassはJavaScript製、Public Domainのオープンソース・ソフトウェアです。