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

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

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

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

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

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

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

jQueryあり前提。

$(window).on('load resize', function () {
    sp_process();
});
$('img[data-sp-src]').each(function () {
    $(this).attr('data-pc-src', $(this).attr('src'));
});
function sp_process() {
    var win_w = $(window).innerWidth();
    if (win_w < 768) {
        $('img[data-sp-src]').each(function () {
            $(this).attr('src', $(this).attr('data-sp-src'));
        });
    } else {
        $('img[data-sp-src]').each(function () {
            $(this).attr('src', $(this).attr('data-pc-src'));
        });
    }
}

<img src="images/main.png" data-sp-src="./images/main_sp.png" alt=""/>

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

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

    img {
      zoom: .5;
      -moz-transform-origin: left top;
      -moz-transform: scale(0.5, 0.5);
    }

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