RWDの為のMedia Queries の変更点 - 闘うITエンジニアの覚え書き

追加された行はこの色です。
削除された行はこの色です。
RWDの為のMedia Queries へ行く。
[[レスポンシブWebデザインの為の基礎知識]] > RWDの為のMedia Queries
* RWDの為のMedia Queries [#ue666be7]
#setlinebreak(on)

#contents

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

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

** モバイル用からデザインする場合 [#o81cf787]
** モバイル用をベースにする場合 [#o81cf787]

#html(<div style="padding:10px;">)

*** (1) ベースのCSSをモバイル用として作成する [#k733f0a8]
#todo()
#myhtml2(){{
/* モバイル用の指定 */
#title {
  color: red;
}
/* PC用の指定 */
@media(min-width: 992px) {
  #title {
    color : blue;
  }
}
}}

*** (2) PC用のCSSを追加する [#f4725c65]
#todo()

#html(</div>)

** PCサイトから先に作る場合 [#s2f9e3c6]
** PCサイトをベースにする場合 [#s2f9e3c6]

#html(<div style="padding:10px;">)

*** (1) ベースのCSSをPC用として作成する [#ubf43c5e]
#todo()
#myhtml2(){{
/* PC用の指定 */
#title {
  color : blue;
}
/* モバイル用の指定 */
@media(max-width: 992px) {
  #title {
    color: red;
  }
}
}}

*** (2) モバイル用のCSSを追加する [#c4a77661]
#todo()

#html(</div>)

** 注意点 [#z8555c59]
上記の例では 表示幅が min-width: 992px を区切りに適用する CSS を切り替えているが、
幅が 992px ちょうどの時は、media queries（xxx-width: 992px）指定が優先される。

例)
#myhtml2(){{
<!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>
}}

#html(<br /><span style="cursor:pointer;color:blue;text-decoration:underline;" onclick="window.open('sample_media_queries.html')">上記のデモを確認</span>)

&br;

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

#myhtml2(){{

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

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