
【レスポンシブ】JavaScriptのwindow.matchMediaメソッドを利用した画像切り替え
JavaScriptのwindow.matchMediaメソッドを利用してPC用の画像とスマホ用の画像を切り替えます。画面リサイズ時はブレークポイントでのみ処理が発生し、windowのresizeイベントを監視する必要がありません。
JavaScriptのwindow.matchMediaメソッドを利用してPC用の画像とスマホ用の画像を切り替えます。画面リサイズ時はブレークポイントでのみ処理が発生し、windowのresizeイベントを監視する必要がありません。
jQueryプラグインのjquery.rwdImageMaps.jsを利用します。日本地図の画像に設定したクリッカブルマップをレスポンシブに対応させます。
CSSのメディアクエリを使わずに、jQueryを利用してPC用の画像とスマホ用の画像を切り替えます。切り替え対象の画像にクラス名を付与することで簡単に設定可能です。