レスポンシブWebデザインの為の基礎知識 > RWDの為のMedia Queries

RWDの為のMedia Queries

Media Queries のタイプ指定ではプリンタ用(print)、TV用(tv) など様々な指定が可能だが、ここではRWD(レスポンシブWebデザイン)用に指定する screen タイプについてのみ記載する。

PC用のサイトを先に作ってからモバイル対応させる場合、いろいろと調整が難しいシーンが出てくるので、
基本はモバイルファースト(モバイル用 -> PC用)でデザインを行うのが好ましいが、逆の手順(PC用 -> モバイル用)で出来ない事もない。
※後から対応する側の Media Queries の指定を min-width と max-width のどちらで記述するかの違いだけなので、そんなにややこしい話ではない。
※デバイスの表示幅を基準で記述する max-device-width 等も存在するが、ここでは割愛する。

モバイル用をベースにする場合

/* モバイル用の指定 */
#title {
  color: red;
}
/* PC用の指定 */
@media(min-width: 992px) {
  #title {
    color : blue;
  }
}

PCサイトをベースにする場合

/* PC用の指定 */
#title {
  color : blue;
}
/* モバイル用の指定 */
@media(max-width: 992px) {
  #title {
    color: red;
  }
}

注意点

上記の例では 表示幅が min-width: 992px を区切りに適用する CSS を切り替えているが、
幅が 992px ちょうどの時は、media queries(xxx-width: 992px)指定が優先される。

例)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<style>

/* モバイル用 */
#title1 {
    color: #f00;
}
@media(min-width: 992px) {
    /* PC用 */
    #title1 {
        color: #00f;
    }   
}

/* PC用 */
#title2 {
    color: #00f;
}
@media(max-width: 992px) {
    /* モバイル用 */
    #title2 {
        color: #f00;
    }   
}

</style>
</head>
<body>

<h2>幅が992pxちょうどの時はタイトル1と2は異なる表示となる</h2>

<div>スマホベースのCSSの場合</div>
<div id="title1">テストタイトル1</div>

<hr />

<div>PCベースのCSSの場合</div>
<div id="title2">テストタイトル2</div>

</body>
</html>

上記のデモを確認


回避策

これを回避するには、以下のようにモバイル用(またはPC用)のmedia queriesのサイズ指定を調整する。
※以下では、モバイル用のサイズを 992 → 991 に変更している。

/* ベース(モバイル用) */
#title1 {
    color: #f00;
}
@media(min-width: 992px) {
    /* PC用 */
    #title1 {
        color: #00f;
    }   
}

/* ベース(PC用) */
#title2 {
    color: #00f;
}
@media(max-width: 991px) {
    /* モバイル用 */
    #title2 {
        color: #f00;
    }   
}

トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2015-11-07 (土) 18:34:01 (1409d)