メディアクエリの使い方
メディアクエリを使うためには、まず.htmlの<head>内に「viewport」を書く。
[box class=”blue_box”]
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0″>
[/box]
CSSにメディアクエリを書いても効いてないなと思ったら、まずこの記述があるかどうか確認する。
メディアクエリで指定すべきサイズ
[box class=”blue_box”]
・デバイス：PC向け
CSS：#css {
width: 1000px;
margin: 0 auto;
}
・デバイス：狭いブラウザとタブレット向け
CSS：@media (max-width: 1020px) and (min-width: 768px) {
#css {
width: 98%;
margin: 0 1%;
}
}
・デバイス：スマホ向け
CSS：@media (max-width: 767px) {
#css {
width: auto;
}
}
[/box]
メディアクエリを書く場所
.css(style.cssなど)の下部にまとめて書く。
