4章. メディアクエリの使い方2（Media Queries）

CSSでのメディアクエリの使い方

CSSファイルでは、下記のような記述になります。
{ }内にセレクタとプロパティを記述します。
CSSファイル内にいくつメディアクエリのブロックを記述してもかまいません。
注意点として、media only screen and ( 内の半角スペースは省略してはいけません。

/* sp用 */
@media only screen and (max-width: 767px){ }
/* pc用 */
@media only screen and (min-width: 768px){ }

比較としてHTMLファイルでの記述は下記のようになります。

<link href="css/sp.css" rel="stylesheet" media="only screen and (max-width: 767px)">
<link href="css/pc.css" rel="stylesheet" media="only screen and (min-width: 768px)">

HTMLと同様、他のメディアタイプを同時に指定ができます。HTMLと同様、カンマで区切って指定します。
下記は、screenとprintを指定した場合です。

/* pc用 */
@media only screen and (min-width: 768px), print{ }

only, andキーワード

@media only screen and (min-width: 768px) and (max-width: 900px){ }