レスポンシブ①

●メディアクエリとviewport

・viewport
   スマホサイトを作る際に書くmetaタグ「viewport」（必須！）
　<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
（ 幅はスマホに合わせて、初期の倍率は1.0[等倍] ）

・メディアクエリ
メディアクエリは、デバイス幅ごとにCSSの記述を切り替えるコード
@media screen and (max-width: ●●px) {
/*横幅 ●●px 未満のデバイス*/
}
@media screen and (min-width: ●●px) {
/*横幅 ●●px 以上のデバイス*/
}

●スマホ対応でNGなコーディング

・メディアクエリに重複した記述を入れる
・要素に高さを指定する（可変させるレスポンシブでは高さ指定は崩れる
　原因となる）
・何でもかんでも display:noneする
・ifremを使う時には注意が必要
・画像を圧縮しない（1Mbを超えないようにする）

●レスポンシブでの画像の扱い

高画質の画像と低画質の画像の２枚を用意する。
まずは必ずbase.cssに以下を記述する。

img {
max-width: 100%;
height: auto;
}

メディアクエリで表示する画像を切り替える。

例）|　.pc_img {
　　|　display: block; /*PC画像表示*/
　　|　}

　　|　.sp_img {
　　|　display: none;/*SP画像非表示*/
　　|　}

　　|　@media screen and (max-width:768px) {
　　|　.pc_img {
　　|　display: none; /*PC画像非表示*/
　　|　}

　　|　.sp_img {
　　|　display: block;/*SP画像表示*/
　　|　}
　　|　}
・スマホ用画像は大きめの画像[大体×2]を用意して縮めて表示することが多い[Retina対応のため]）
・画像比率を崩さないように注意する。