![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib9r7YQhFo6c_TLu4u5CzAbirKctG0pkSVvc0x12LY46ZMnn6zw9eMVQaCJdlVlIl1EJ9WW4gjTejIU1f8CZZNb7-W0DzUUjKSNJajAaNmBHj2TRdyj8AvRDbAkyhOj4-mvRTORNUnbm8K/s1600/SnapCrab_body+%25E8%25A6%2581%25E7%25B4%25A0%25E3%2581%25AB%25E3%2583%2587%25E3%2583%2590%25E3%2582%25A4%25E3%2582%25B9%25E3%2582%2592%25E8%25AD%2598%25E5%2588%25A5%25E3%2581%2599%25E3%2582%258B%25E3%2582%25AF%25E3%2583%25A9%25E3%2582%25B9%25E3%2582%2592%25E4%25BB%2598%25E5%258A%25A0+-+Google+Chrome_2017-2-16_16-24-54_No-00.png)
ウィンドウ幅に応じて、デバイスを識別するクラスを body 要素に付加する方法を紹介します。付加された識別クラスを元に、デバイス毎に異なるスタイルを CSS で指定できるようになります。
HTML
jQuery
補足
- このサンプルでは、ロード時とリサイズ時にウィンドウ幅をチェックして、 600px 未満なら "SMP"、960px 未満なら "TAB"、それ以上なら "PC" というクラスを body 要素に追加しています。
CSS
補足
- このサンプルでは、body 要素に付加されているクラスによって、表示される li 要素とその背景が変わるよう CSS を設定しています。