Study record

未経験2児ママのプログラミング勉強記録

HTML/CSS_lll レスポンシブデザイン

Media Queries(メディアクエリ)

ブラウザの画面サイズに応じてCSSのスタイルを設定できるMedia Queries(メディアクエリ)という手法を用いて、様々なデバイスや画面サイズに合わせてコンテンツのレイアウトを調整する。

書き方

  • @media (条件) { .... } :指定された条件が当てはまるときにのみ{ }内のCSSが適用される
  • headタグ内にviewportを設定する

条件

  • max-width:○○px:○○pxまで
  • min-width:●●px :●●pxから
ブレイクポイント

デザインが切り替わる画面幅のポイントをブレイクポイントと呼ぶ。
max-width: ◯◯px(またはmin-width: ◯◯px)のようにメディアクエリの条件を指定するとき、「◯◯px」の部分。

<端末別画面サイズ>

<一般的なブレイクポイント>

<head>
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
</head>
/* 480px以下の場合h1はgreenになる */
@media (max-width:480px) {
  h1{
      color:green;
    }
}