Media Queriesの@mediaを使ってブラウザ幅やデバイス幅に応じたCSSを記述してみる

Media Queriesの@media

CSS3のMedia Queriesのうちの一つ、@mediaを使ってみたのでメモしておきます。一般的によく使いそうなものを簡単にまとめておこうかと思います。今後、おそらく使っていく予定なので、少しずつでも覚えていきたいですね。レスポンシブWebデザインには欠かせないものだと思うので。

@mediaでCSSファイル内に直接記述していく

CSSファイル自体を分けるやり方もありますが、個人的には@mediaを使って1つのCSSファイル内に直接記述していく方が合っているのでこちらを使っていこうかと思っています。

min-width

ブラウザの横幅が〇〇以上のものを指定していきます。

/* ブラウザ幅が960px以上 */
@media screen and (min-width: 960px) {
    .sample {
        background: red;
    }
}

max-width

ブラウザの横幅が〇〇以下のものを指定していきます。

/* ブラウザ幅が600px以下 */
@media screen and (max-width: 600px) {
    .sample {
        background: blue;
    }
}

and

ブラウザの横幅が〇〇〜〇〇の間を指定していきます。

/* ブラウザ幅が700px〜800pxの間 */
@media screen and (min-width: 700px) and (max-width: 800px) {
    .sample {
        background: green;
    }
}

min-device-width

デバイス幅が〇〇以上のものを指定していきます。

/* デバイス幅が500px以上 */
@media only screen and (min-device-width: 500px) {
    .sample {
        color: #eee;
    }
}

ちなみに、min-device-widthとmin-width(またはmax-device-widthとmax-width)の違いはなんだろうと思い調べてみたんですが、どうやらデバイス幅とブラウザ幅の違いみたいですね。

例えば、CSSにデバイス幅が500px以下の指定が記述されていた場合、500px以上あるデバイス(PCなど)のブラウザをいくら縮小しても、そのCSSは適用されないということです。

max-device-width

デバイス幅が〇〇以下のものを指定していきます。

/* デバイス幅が500px以下 */
@media only screen and (max-device-width: 500px) {
    .sample {
        color: #ccc;
    }
}

orientation: portrait

デバイスの向きが縦の場合です。

/* デバイスの向き(縦) */
@media only screen and (orientation: portrait) {
    .sample {
        background: yellow;
    }
}

orientation: landscape

デバイスの向きが横の場合です。

/* デバイスの向き(横) */
@media only screen and (orientation: landscape) {
    .sample {
        background: orange;
    }
}

ということで、大体この辺をよく使いそうな感じだったのでまとめてみました。

以下、自分が作った時のサンプルコードを載せておきます。

サンプルコード(HTML)

<p class="sample1">サンプル</p>
<p class="sample2">サンプル</p>

サンプルコード(CSS)

/* ブラウザ幅が960px以上 */
@media screen and (min-width: 960px) {
    .sample1 {
        background: red;
    }
    body {
        width: 960px;
    }
}

/* ブラウザ幅が600px以下 */
@media screen and (max-width: 600px) {
    .sample1 {
        background: blue;
    }
}

/* ブラウザ幅が700px〜800pxの間 */
@media screen and (min-width: 700px) and (max-width: 800px) {
	.sample1 {
		background: green;
	}
}

/* デバイス幅が500px以上 */
@media only screen and (min-device-width: 500px) {
    .sample1 {
        color: #eee;
    }
}

/* デバイス幅が500px以下 */
@media only screen and (max-device-width: 500px) {
    .sample1 {
        color: #ccc;
    }
}

/* デバイスの向き(縦) */
@media only screen and (orientation: portrait) {
    .sample2 {
        background: yellow;
    }
}

/* デバイスの向き(横) */
@media only screen and (orientation: landscape) {
    .sample2 {
        background: orange;
    }
}

Media QueriesをIE8以下にも対応させるためのcss3-mediaqueries-jsの記事も書いたので、よろしければこちらもどうぞ。

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

オススメ商品

Archives