MediaQuery

MediaQueryとは

MediaQueryはデバイスの解像度やウィンドウ幅などの指定条件によって別々のcssを適応できる機能。

デバイス別ウィンドウ幅

• PC...960px以上
• タブレット...959px～768px
• スマートフォン...767px

注意点

• MediaQueryの記述がない場合はPCの画面表示になる。
• レイアウトの記述が、MediaQueryの記述にも引き継がれる。

書き方

@media (max-width:○○px){

}

MediaQueryを使用して、ウィンドウ幅によって背景色を切り替える設定をしてみる。

@charset "utf-8";
/* CSS Document */

body{
  background:#096;
}
/*  タブレットサイズのレイアウト*/
@media screen and (max-width: 959px){
body{
background: #636;}  
 }
/*スマフォサイズのレイアウト*/
@media screen and (max-width: 767px){
body{
background: #F00;}
 }