レスポンシブ

レスポンシブ

【レスポンシブ】JavaScriptのwindow.matchMediaメソッドを利用した画像切り替え

JavaScriptのwindow.matchMediaメソッドを利用してPC用の画像とスマホ用の画像を切り替えます。画面リサイズ時はブレークポイントでのみ処理が発生し、windowのresizeイベントを監視する必要がありません。

レスポンシブ

【レスポンシブ】クリッカブルマップのレスポンシブ対応【jquery.rwdImageMaps.js】

jQueryプラグインのjquery.rwdImageMaps.jsを利用します。日本地図の画像に設定したクリッカブルマップをレスポンシブに対応させます。

レスポンシブ

【レスポンシブ】jQueryを利用した画像切り替え

CSSのメディアクエリを使わずに、jQueryを利用してPC用の画像とスマホ用の画像を切り替えます。切り替え対象の画像にクラス名を付与することで簡単に設定可能です。

タイトルとURLをコピーしました