メディアクエリ (@madia) [CSS]

使い方

ウィンドウが指定した幅以上の場合に有効なスタイルを定義する。

@media (min-width: 768px) {
  .content { width: 600px; }
}

ウィンドウが指定した幅以下の場合に有効なスタイルを定義する。

@media (max-width: 767.98px) {
  .content { width: calc(100% - 80px); }
}

ウィンドウ幅が指定したレンジ内にある場合に有効なスタイルを定義する。

@media (min-width: 768px) and (max-width: 1199.98pxpx) {
  .header { font-size: 24px; }
}

参考：

Media Queries の指定について – Qiita

デバイスに合わせて CSS を振り分ける「Media Queries」| DevelopersIO

メディアクエリの使用 | MDN

レスポンシブの基本、メディアクエリの書き方 | それからデザイン スタッフブログ

CSS でメディアクエリ (Media Queries) の基本的な書き方、記述の意味を理解し、「何となく使う」を卒業する。| WEMO

Media Queries の基本についてまとめてみた | Rriver

CSS3 Media Queries | W3Schools