メディアクエリの書き方について

メディアクエリの書き方について調べたのでメモです。

レスポンシブデザインに対応させる方法の1つとしてメディアクエリを使う方法がある。
メディアクエリを使うと、デバイスの画面の大きさによって適用する内容を変更できるらしい。

指定したpxより小さい場合に適用する

@media screen and (max-width: px) {

}

指定したpx以上の場合に適用する

@media screen and (min-width: px) {

}

画面が横向きの場合に適用する

@media only screen and (orientation:landscape) {

}

画面が縦向きの場合に適用する

@media only screen and (orientation:portrait) {

}

viewportの設定
HTMLのmeta要素で次のように書く

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