メディアクエリについて
こんにちは
お久しぶりとなってしまいました。
今回はメディアクエリについて調べてみました。
メディアクエリとは、CSS2までは、媒体までしか判断できなかったメディア・タイプをCSS3から拡張し”媒体の特性”まで判断できるようにしたものです。
例えば、デスクトップPCとスマートフォンでは画面のサイズが異なりますが、どのように対応するかというと
<head>
<link rel="stylesheet" href="style.css" media="screen and (max-hight:320px)">
</head>
上記の様にhead要素のmediaにand (max-hight:320px)を付け足して画面のサイズ事に適用するCSSを変更することができます。
もしくは、スタイルシートに直接
@media screen and (min-hight:320px) {
/* 画面高さが320pxからはここを読み込む */
p { color:#red;}
}
こんな感じで書き込むかします。
参考文献
