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

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

サンプル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; }
}