CSS メディアクエリ解説

CSS メディアクエリ：max-width または max-height

CSS メディアクエリは、デバイスの幅や高さ、解像度などの特性に基づいて、異なるスタイルを適用するための機能です。この中で、max-width と max-height は、それぞれデバイスの最大幅と最大高さを指定するプロパティです。

max-width

• 例
  

  @media (max-width: 768px) {
    /* 768px 以下のデバイスに適用されるスタイル */
  }
  

• 用途
  デバイスの幅が指定された値以下になった場合にスタイルを適用します。

max-height

組み合わせの使用

• 例
  

  @media (max-width: 768px) and (max-height: 480px) {
    /* 幅が 768px 以下かつ高さが 480px 以下のデバイスに適用されるスタイル */
  }
  

• 用途
  デバイスの幅と高さの両方を条件として、より複雑なスタイルを適用します。

@media (max-width: 768px) {
  /* 768px 以下のデバイスに適用されるスタイル */
  body {
    font-size: 14px;
  }
  .container {
    width: 90%;
  }
}

• 解説
  
  • @media (max-width: 768px): デバイスの幅が 768px 以下の場合に、中括弧内のスタイルが適用されます。
  • body { font-size: 14px; }: デバイスの幅が 768px 以下の場合、フォントサイズを 14px に設定します。
  • .container { width: 90%; }: デバイスの幅が 768px 以下の場合、.container クラスの要素の幅を 90% に設定します。

@media (max-height: 480px) {
  /* 480px 以下のデバイスに適用されるスタイル */
  .image {
    display: none;
  }
}

• 解説
  
  • .image { display: none; }: デバイスの高さが 480px 以下の場合、.image クラスの要素を非表示にします。

max-width と max-height の組み合わせ

@media (max-width: 768px) and (max-height: 480px) {
  /* 幅が 768px 以下かつ高さが 480px 以下のデバイスに適用されるスタイル */
  .content {
    font-size: 12px;
  }
}

• 解説
  
  • .content { font-size: 12px; }: デバイスの幅が 768px 以下かつ高さが 480px 以下の場合、.content クラスの要素のフォントサイズを 12px に設定します。

Viewport Units

• 例
  

  .element {
    width: 50vw; /* ビューポートの幅の 50% */
    height: 30vh; /* ビューポートの高さの 30% */
  }
  

Flexbox

• 例
  

  .container {
    display: flex;
    flex-wrap: wrap;
  }
  .item {
    flex: 1;
  }
  

Grid Layout

• 例
  

  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  

JavaScript による動的なスタイル変更

• 例
  

  window.addEventListener('resize', function() {
    if (window.innerWidth <= 768) {
      document.body.classList.add('mobile');
    } else {
      document.body.classList.remove('mobile');
    }
  });
  

**これらの手法は、それぞれ異なる利点と欠点があります。**例えば、Viewport Units はデバイスのサイズに依存しないレイアウトを作成できますが、複雑なレイアウトには適さない場合があります。Flexbox と Grid Layout は柔軟なレイアウトを作成できますが、学習コストが高くなる可能性があります。JavaScript による動的なスタイル変更は柔軟性がありますが、パフォーマンスに影響を与える可能性があります。