【CSS設計】メディアクエリ(@media)について

css-logo 【プログラミング】

メディアクエリの使い方

メディアクエリを使うためには、まず.htmlの<head>内に「viewport」を書く。

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0″>

CSSにメディアクエリを書いても効いてないなと思ったら、まずこの記述があるかどうか確認する。

メディアクエリで指定すべきサイズ

・デバイス: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;
                   }
               } 

メディアクエリを書く場所

.css(style.cssなど)の下部にまとめて書く。