2020年12月18日金曜日

body 要素にウィンドウ幅を区別するクラスを付ける

body 要素にウィンドウ幅を区別するクラスを付ける。例えば、スマートフォン・タブレット・パソコンなどを判別するために。

メディアクエリよりも CSS や jQuery で扱いやすくなる。

デモページを表示

CSS

補足
  • ウィンドウ幅によって、アルバムの列数を変えるサンプル（実用的ではないが…）。
  • レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足
  • ロード・リサイズ時に body 要素に、ウィンドウ幅によって、クラス SMP、TAB、PC を付ける。PC 以上のウィンドウ幅は、PC に加えて、W960・W1280・W1600・W1920 のいずれかのクラスも追加する。
  • デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足
  • ウィンドウ幅を変えると写真一覧の列数が変わる。

関連投稿

ラベル: ,