ウィンドウ幅に応じて、デバイスを識別するクラスを body 要素に付加する方法を紹介します。付加された識別クラスを元に、デバイス毎に異なるスタイルを CSS で指定できるようになります。
HTML
jQuery
補足
- このサンプルでは、ロード時とリサイズ時にウィンドウ幅をチェックして、 600px 未満なら "SMP"、960px 未満なら "TAB"、それ以上なら "PC" というクラスを body 要素に追加しています。
CSS
補足
- このサンプルでは、body 要素に付加されているクラスによって、表示される li 要素とその背景が変わるよう CSS を設定しています。