CSSで幅と高さの両方にメディアクエリを設定する方法

1. 幅と高さの両方を指定するメディアクエリ:

   @media (min-width: 768px) and (min-height: 600px) {
    /* 768px以上の幅と600px以上の高さに適用されるスタイル */
   }

   上記の例では、ウィンドウの幅が768px以上かつ高さが600px以上の場合に適用されるスタイルを指定しています。

2. 幅または高さのいずれかに対応するメディアクエリ:

   @media (min-width: 768px), (min-height: 600px) {
    /* 768px以上の幅または600px以上の高さに適用されるスタイル */
   }

   上記の例では、ウィンドウの幅が768px以上または高さが600px以上の場合に適用されるスタイルを指定しています。

3. 幅と高さの両方に異なる条件を指定するメディアクエリ:

   @media (min-width: 768px) and (max-width: 1024px), (min-height: 600px) and (max-height: 800px) {
    /* 幅が768px以上かつ1024px以下、または高さが600px以上かつ800px以下に適用されるスタイル */
   }

   上記の例では、ウィンドウの幅が768px以上かつ1024px以下、または高さが600px以上かつ800px以下の場合に適用されるスタイルを指定しています。

これらは一部の例です。メディアクエリはさまざまな条件で使用でき、幅と高さの両方を組み合わせて利用することもできます。レスポンシブデザインにおいて、メディアクエリは異なるデバイスやウィンドウサイズに対応するための強力なツールです。適切なメディアクエリを使用して、コンテンツを適切に表示するためのスタイルを指定しましょう。