PC専用サイトのレスポンシブ化!?に使えそうなcss/js小技あれこれ

PC専用に作られたサイトを、レスポンシブでスマホ対応してください。デザインそのままで。

ということが、時々あります。

できればhtmlは大改造したくない

htmlを大改造せずに、PC専用サイトをスマホ対応させていくうえで使えそうな小技。

スマホサイズの時だけ、別の画像をsrcにセット

レスポンシブイメージ用のhtmlなんて書いていられるか……!というときの簡単お取替え術。

jQueryあり前提。

上記のjsを動かしていれば、imgタグ内にdata-sp-src属性でSP用の画像を指定してあげれば、画面サイズによって自動で画像が切り替わります。

とりあえず画像が50%になればいい

画像を使っているところにこれをかけてあげると、画像がそのまま50%のサイズになって表示されます。
小さくなりすぎに注意。