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)">

メディアごとのサイズ

※実際の指定は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)  {

}
コメント
0件
トラックバック
0件
ブックマーク
0 users
ksrtmyk
ksrtmyk