# @media

> 画面サイズ、デバイスタイプ、印刷状況などの条件に基づいてスタイルを適用するルールです。レスポンシブデザインの基礎となる機能で、モバイル、タブレット、デスクトップなど様々なデバイスに対応できます。

- カテゴリ: その他
- URL: https://www.css-dictionary.com/property/media-queries/

## 構文

```css
@media <media-query> { ... }
```

## Tailwindでは

- バリアント: `sm: / md: / lg: / xl:` を先頭に付けて使う
- `md:grid-cols-2` → @media (min-width: 48rem) { grid-template-columns: repeat(2, ...) }
- 補足: モバイルファースト（min-width基準）。上限側は max-md:、任意幅は min-[420px]:。

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 1+ / Firefox 1+ / Safari 3+ / Edge 12+

## コード例

### 例1: モバイル（768px以下）でのレイアウト調整

```css
@media (max-width: 768px) {
  .container {
    padding: 1rem;
    font-size: 14px;
  }
}
```

### 例2: タブレット（769px〜1024px）で2列グリッド

```css
@media (min-width: 769px) and (max-width: 1024px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
```

### 例3: デスクトップ（1025px以上）でサイドバー表示

```css
@media (min-width: 1025px) {
  .sidebar {
    display: block;
  }
  .main {
    margin-left: 250px;
  }
}
```

### 例4: デバイスの向き（縦・横）に応じた高さ調整

```css
@media (orientation: portrait) {
  .hero {
    height: 50vh;
  }
}

@media (orientation: landscape) {
  .hero {
    height: 100vh;
  }
}
```

### 例5: 印刷時のスタイル調整

```css
@media print {
  .no-print {
    display: none;
  }
  body {
    font-size: 12pt;
    color: black;
  }
}
```

### 例6: ダークモード対応

```css
@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: #ffffff;
  }
}
```

## TIPS

モバイルファーストで設計し、小さい画面から大きい画面へとスタイルを追加していくのが一般的。breakpointは320px, 768px, 1024px, 1200pxなどがよく使われる。

## よくある間違い

max-widthとmin-widthの使い分けを間違えると意図しない結果になる。重複する条件で後から書いたルールが優先される。

## AIがよく間違えるポイント

AIは古いmin-width/max-width記法だけで書きがちですが、現在は範囲構文（@media (768px <= width < 1024px)）が全ブラウザで使え、境界の重複ミス（max-width: 767pxのような-1px調整）を根本から解消できます。また画面幅以外（hover: hover、prefers-*系）のクエリを組み合わせる発想もAIからは出にくいので明示すると良いです。

## AIへの依頼文例

- このmin-width/max-widthだらけのメディアクエリを新しい範囲構文に書き換えて、境界のバグがないか確認して

## 関連プロパティ

- [container-queries](https://www.css-dictionary.com/property/container-queries.md)
- [aspect-ratio](https://www.css-dictionary.com/property/aspect-ratio.md)