ウサヲブログ  HOME

ウェブ制作に関わる備忘録などを綴ります

このページの位置: HomeCSS「「メディアクエリー」のプチポイント。」の記事

「メディアクエリー」のプチポイント。

ウサヲです。
いざって時に助かるものをアップして残しておこうシリーズ。
今回は平素よく使う「メディアクエリー」のプチポイント。

メディアクエリーってほんと調べたら複雑でいろいろなことがあるのですが、ウサヲが使う最低限をメモ。

サンプルHTMLはこちら。

<p class="mediaTest">ウサヲは昼間、寝ているよ。</p>

 

で、cssはコチラ。

/*通常の場合*/
p.mediaTest { color: blue; }

/*min-width 500px以上の場合*/
@media screen and (min-width: 500px) {
  p.mediaTest { color: red; }
}

/*max-width 800px以下の場合*/
@media screen and (max-width: 800px) {
  p.mediaTest { color: red; }
}

/* orは以下 */ 
@media screen and (min-width: 500px),
screen and (max-height: 800px) { 
  p.mediaTest { color: red; }
}

/* andは以下 */
@media screen and (min-width: 500px) and (max-width: 800px) { 
  p.mediaTest { color: red; }
}

/* andとorのミックスは以下 */
@media screen and (min-width: 400px) and (max-width: 500px), 
screen and (min-width: 700px) and (max-width: 800px) {
  p.mediaTest { color: red; }
}

 

コメントを残す

日本語でお願いします。「テスト投稿」のような短い文は無視されます。

TOP