「メディアクエリー」のプチポイント。
ウサヲです。
いざって時に助かるものをアップして残しておこうシリーズ。
今回は平素よく使う「メディアクエリー」のプチポイント。
メディアクエリーってほんと調べたら複雑でいろいろなことがあるのですが、ウサヲが使う最低限をメモ。
サンプル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; }
}