画面サイズ別にCSSを切り替える ‘Media Queries’ についての基礎知識

レスポンシブのwebサイト作成に必須のMedia Queries（@media screen）について復習兼ねてまとめます。

Media Queries とは？

使い方

Media Queries の使い方は2通り。

1,htmlソースに記述してcssを切り替える
2,1つのcssに記述する

1,htmlソースに記述してcssを切り替える場合

htmlソースのhead内に記述します。
2つのcssを用意して、画面サイズによってどちらのcssを有効にするか指定できます。

/* 画面サイズの横幅が480px以下の場合にだけ phone.css が
768px以上の場合にだけ pc.css が適用 */
<link rel="stylesheet" href="phone.css" media="screen and (max-width: 480px)">
<link rel="stylesheet" href="pc.css" media="screen and (min-width: 768px)">

2,cssに記述する場合

1つのcssで複数の画面サイズの指定ができます。
対象ごとにCSSファイルを分割する必要はありません。

画面サイズの横幅が指定したサイズより小さい場合に、スタイルが適用されます。

/* 画面サイズの横幅が 768px より小さい場合に適用 */
@media screen and (max-width: 768px) {
  .tama {
    font-size :16px;
  }
}

画面サイズの横幅が指定したサイズより大きい場合に、スタイルが適用されます。

/* 画面サイズの横幅が 480px より小さい場合に適用 */
@media screen and (min-width: 480px) {
  .tama {
    font-size :14px;
  }
}

複数の指定も可能です。

/* 画面サイズの横幅が 480px より大きく、768より小さい場合に適用 */
@media screen and (min-width: 600px) and (max-width: 768px) {
  .tama {
    font-size :16px;
  }
}