JavaScriptのレスポンシブ対応には、MediaQueryList(window.matchMedia)を使って書くのが好きなのですが、様々な処理をレスポンシブ切り替えする場合、以下を毎回JavaScript内のいろいろなところで書くのは長い……。
const mql = window.matchMedia("(max-width: 600px)");
function hoge(e) {
if (e.matches) {
//マッチしたらやりたいこと
} else {
//マッチしなかったときはこっち
}
}
mql.addEventListener("change", hoge);//画面リサイズしたとき用
hoge(mql);//最初に開いたとき用
……関数にしてまとめたらもう少し楽ができないか? ということでまとめました。
目次
コード
関数
const responsiveMatch = (onMatch,onUnMatch,media = 'max-width: 768px') => {
//第3引数に入れたメディアクエリもしくは768pxのところでMediaQueryList作成
const mql = window.matchMedia('('+media+')');
//MediaQueryListにマッチした時の動作、しなかった時の動作を引数から受け取る
function mediaChange(e) {
if (e.matches) {
onMatch();
} else {
onUnMatch();
}
}
//MediaQueryListのChangeイベント時に発火させる
mql.addEventListener("change", mediaChange);
//ページ読み込み時にも発火させる
mediaChange(mql);
}
使う方
responsiveMatch(
() => {
console.log("match")
},
() => {
console.log("unMatch")
},
"max-width: 500px"//768pxの場合は省略可
);
使用例:スライド枚数とメディアクエリの2つの基準でSplideの発火を切り替え
「PCの時はperPageが3、SPのときはperPageが1のカルーセルスライダー」を、PCの時はスライド枚数が4枚以上あるときだけ発火させたいが、SPの時は枚数2枚以上で発火にしたい。
という場合の使用例。
document.addEventListener("DOMContentLoaded", function () {
const slides = document.querySelectorAll(".splide__slide");
let spSlide, pcSlide;
responsiveMatch(
() => {
if (pcSlide) {
pcSlide.destroy();
}
//SPはスライド枚数が2枚以上の時だけ発火
if (slides.length > 1) {
spSlide = new Splide(".splide", {
type: "loop",
rewind: true,
perPage: 1
});
spSlide.mount();
}
},
() => {
//PCはスライド枚数が4枚以上の時だけ発火
if (spSlide) {
spSlide.destroy();
}
if (slides.length > 3) {
pcSlide = new Splide(".splide", {
type: "loop",
rewind: true,
perPage: 3,
gap:16,
});
pcSlide.mount();
}
},
"max-width: 500px" //768pxの場合は省略可
);
});
参考資料
https://developer.mozilla.org/ja/docs/Web/API/MediaQueryList
コメント