レスポンシブ

レスポンシブについて

「viewport」の指定をする

<meta name="viewport" content="width=device-width,initial-scale=1">

フォントサイズの指定をする

横並びのコンテンツを縦並びにする
画像だけではなく、サイト全体的に可変を意識してサイズを％で指定します。

html {
    font-size: 62.5%;　　/*基準フォントサイズを10pxにするという意味*/
}

body {
    font-size: 14px;
    font-size: 1.4rem;
}

/*pxとremの両方を指定していますが、
 remを利用できないブラウザを考慮してpxとrem両方で指定しています。*/

h1 {
font-size: 4rem; /* 40px */
}

p {
font-size: 1.4rem; /* 14px */
}

メディアタイプ

screen（一般的ディスプレイ）、projection(プロジェクター)、
print(プリンタ)、tv(テレビ)、all(すべて)など

記述の仕方(例)

@media メディアタイプ { /*そのメディアでのみ有効となるスタイル*/ }
小～大の順番(モバイルファースト)　大〜小の順番(デスクトップファースト)で記載しなければならない。
携帯、タブレット、PCのブレイクポイントの分岐が必要である。

@media screen and (min-width:480px) { 
/*　画面サイズが480pxからはここを読み込む　*/
}

@media screen and (min-width:768px) and max-width:1024px) {
/*　画面サイズが768pxから1024pxまではここを読み込む　*/
}

@media screen and (min-width:1024px) {
/*　画面サイズが1024pxからはここを読み込む　*/
 
}