モバイルやPCなどサイズが違うスタイルシート（CSS）を設定する

CSS3から可能な設定になります。

ブラウザサイズが異なる端末で同一のHTMLを使う場合に利用します。

＜その１　スタイルシートに書く＞

スタイルシート(CSS)に各サイズごとの設定を書くことができます。

@media only screen and (サイズ){
    ここにCSS定義を書く
}

例

横のサイズが800pxまでの場合に実行される処理になる。

@media only screen and (max-width:800px){
    display: none;
    background-color: #ffffff;
}

＜その２　HTMLからスタイルシートを読み込むときに設定する＞

CSSファイルをサイズによって切り分ける場合に便利です。

<link rel="stylesheet" href="style.css" media="screen and (サイズ)">

その１と同じく横のサイズが800pxまでの場合に実行される処理の例となります。

<link rel="stylesheet" href="style.css" media="screen and (max-width:800px)">