![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
|
レスポンシブWebデザインの為の基礎知識 > RWDの為のMedia Queries RWDの為のMedia Queries †Media Queries のタイプ指定ではプリンタ用(print)、TV用(tv) など様々な指定が可能だが、ここではRWD(レスポンシブWebデザイン)用に指定する screen タイプについてのみ記載する。 PC用のサイトを先に作ってからモバイル対応させる場合、いろいろと調整が難しいシーンが出てくるので、 モバイル用をベースにする場合 †/* モバイル用の指定 */
#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 を切り替えているが、 例) <!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のサイズ指定を調整する。 /* ベース（モバイル用） */
#title1 {
color: #f00;
}
@media(min-width: 992px) {
/* PC用 */
#title1 {
color: #00f;
}
}
/* ベース（PC用） */
#title2 {
color: #00f;
}
@media(max-width: 991px) {
/* モバイル用 */
#title2 {
color: #f00;
}
}
|
