CSS3のMedia Queriesのうちの一つ、@mediaを使ってみたのでメモしておきます。一般的によく使いそうなものを簡単にまとめておこうかと思います。今後、おそらく使っていく予定なので、少しずつでも覚えていきたいですね。レスポンシブWebデザインには欠かせないものだと思うので。
[ads_center]
@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の記事も書いたので、よろしければこちらもどうぞ。
