レスポンシブデザインのhtml記述方法

１．headにviewportを記述する
２．cssでメディアクエリを設定する

１．headにviewportを記述する

用語

viewport：Webページを表示するデバイス（PCやスマートフォンなど）を検知し、そのデバイスの画面サイズなどを取得する。htmlのhead内にmetaタグで記述する。

ポイント

viewportを記述しないとメディアクエリが機能しないので必ずセットで記述する！

例）

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<!--ここから-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--ここまで-->

</head>
<body>
</body>
</html>

２．cssでメディアクエリを設定する

用語

メディアクエリ：画面のサイズに合わせてCSSの適用を分岐できる機能
@media (min-width:サイズpx) {　cssの定義　}で記載する

ポイント

ブレイクポイントデバイス
480px以下スマートフォン(縦）
600px以下スマートフォン(横)
960px以下タブレット　　　　　　
1280px以下パソコン(画面小)
1280pxより大きいパソコン(画面大)

例）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--ここから-->
 <style>
            .media {
                background-color: #333;
            }

            @media (min-width:480px) {
                .media {
                    background-color: blue;
                }
            }

            @media (min-width:640px) {
                .media {
                    background-color: red;
                }
            }
  </style>
<!--ここまで-->

</head>
<body>
</body>
</html>