レスポンシブユーティリティー

レスポンシブ向けの汎用スクリプトです。

画像をAlt文字列で置換

画像をAlt文字列で置換

ブレークポイントで画像を差し替え

初期状態(imgのsrcに指定する画像)をPC版にすることもスマホ版にすることもできます。
結果は同じですが、ページのロードに時間がかかった場合は、初期状態の画像が一瞬見える可能性があります。

初期状態をPC画像にする場合

PUNITED.useful.replaceImage("data-spimg",959);

初期状態をスマホ画像にする場合

PUNITED.useful.replaceImage("data-pcimg",960,true);

タッチデバイス判別

タッチデバイスかどうかを判別するスクリプトです。
タッチデバイスでマウスオーバーが残るのが気になるときなどに利用してください。

PUNITED.useful.isTouchDevice()

使用例

JSで判別してクラスを付けます。

if(PUNITED.useful.isTouchDevice()) {
	$("html").addClass('is_touch_device');
}
else{
	$("html").addClass('is_mouse_device');
}

そのクラスを含めてCSSのマウスオーバーを指定します。

.is_mouse_device .btn:hover{
	background-color:red;
}