JavaScriptを使用して画面幅に応じた条件分岐を行う方法

2024-02-09 23:51 JavaScript画面幅条件分岐

  1. window.innerWidthを使用する方法:

    if (window.innerWidth < 768) {
// 画面幅が768px未満の場合の処理
} else if (window.innerWidth < 1024) {
// 画面幅が768px以上かつ1024px未満の場合の処理
} else {
// 画面幅が1024px以上の場合の処理
}

  2. window.matchMediaを使用する方法:

    var smallScreen = window.matchMedia("(max-width: 767px)");
var mediumScreen = window.matchMedia("(min-width: 768px) and (max-width: 1023px)");
var largeScreen = window.matchMedia("(min-width: 1024px)");
if (smallScreen.matches) {
// 画面幅が767px以下の場合の処理
} else if (mediumScreen.matches) {
// 画面幅が768px以上かつ1023px以下の場合の処理
} else if (largeScreen.matches) {
// 画面幅が1024px以上の場合の処理
}

  3. CSSのメディアクエリを使用する方法: HTMLファイルの<head>セクション内に以下のようなCSSを記述します。

    <style>
@media (max-width: 767px) {
/* 画面幅が767px以下の場合のスタイル */
}
@media (min-width: 768px) and (max-width: 1023px) {
/* 画面幅が768px以上かつ1023px以下の場合のスタイル */
}
@media (min-width: 1024px) {
/* 画面幅が1024px以上の場合のスタイル */
}
</style>

    これにより、画面幅に基づいて異なるスタイルが適用されます。JavaScriptを使用してスタイル以外の処理を行う場合は、CSSクラスの追加や削除などの方法を組み合わせることができます。

これらの方法を使用すると、画面幅に応じて異なる処理を行うことができます。自分のニーズやプロジェクトの要件に合わせて最適な方法を選択してください。