指定したウィンドウ幅で表示をコントロールするMedia Queries(メディアクエリ)

1月 8th, 2013

指定したウィンドウ幅で見え方を変えるレスポンシブなサイトを作る時に簡単で便利。

CSSファイルに以下のように記述するだけ

/* ウィンドウ幅が600px以上の場合 */
@media screen and (min-width:600px) {
   .small { display: none; }  /* smallを非表示 */
   .big{ display: block; } /* bigを表示 */
   .area{ color: #ff00ff; } /* 文字色を指定 */
}
 
 
/* ウィンドウ幅が600px未満の場合 */
@media screen and (max-width: 599px) {
   .small { display: block; } /* smallを表示 */
   .big { display: none; }  /* bigを非表示 */
   .area{ color: #00ff00; } /* 文字色を指定 */
}


指定した幅(ここでは600px)で表示非表示、色、サイズなど切り替えが自由自在。

IE8以下でMedia Queriesを有効にするおまじないをheadに

<![if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]>



これでレスポンシブデザインも楽々?

Related Posts