media screenの設定

スクリーンサイズによって、スタイルシートを切り替える方法です。
480pxで切り替えを行うようにしています。

---

html上でのスタイルシートの切り替え

<link rel="stylesheet" media="screen and (min-width: 481px)" href="style2.css" />
<link rel="stylesheet" media="screen and (max-width: 480px)" href="style1.css" />

---

CSS上での切り替え

@media screen and (min-width: 481px)  {
 h2{font-size:120%;}
}
@media screen and (min-width: 0px) and (max-width: 480px) {
 h2{font-size:90%;}
}

 

関連記事