CSS Media Queriesについてまとめてみた

Media Queriesとは

画面サイズに応じて、適用させるスタイルを限定させることのできる記述方法

基本記述方法

CSS内での記述方法
ZZZpx以上、XXXpx以下

@media only [対応メディア] and (max-width: XXXpx) and (min-width: ZZZpx) {
   Style:Style;
}

HTMLの読み込みソースでの指方法

<link rel="stylesheet" type="text/css" href="style.css" media="only [対応メディア] and (max-width: XXXpx) and (min-width: ZZZpx)">

メディアごとのサイズ

• 801px以上：PC
• 601px~800px：ネットブック
• 481px~600px：タブレット、iPhon4(ポートレート)
• 321px~480px：スマートフォン
• 320px以下：iPhone3GS以下

※実際の指定は20pxずつプラスする。これはWebkit系のバグで垂直のスクロールバー(20px)がウィンドウサイズに含まれない為
詳しくは下記を参照
http://all-web-blog.blogspot.com/2011/04/media-queries-15px.html

/* Under 960px */
@media only screen and (max-width: 980px) and (min-width: 821px) {

}

/* Under 800px */
@media only screen and (max-width: 820px) and (min-width: 621px) {

}

/* Under 600px */
@media only screen and (max-width: 620px) and (min-width: 501px) {

}

/* Under 480px */
@media only screen and (max-width: 500px) and (min-width: 341px) {

}

/* Under 320px */
@media only screen and (max-width: 340px) and (min-width: 5px)  {

}