KH-WEBLOG TOP > WEBメモ > CSS > Media Queriesでウィンドウサイズやデバイスに合わせてCSSを振り分ける:CSS3

Media Queriesでウィンドウサイズやデバイスに合わせてCSSを振り分ける:CSS3

CSS3のMedia Queriesという便利な仕様を使ってウィンドウサイズやスマートフォン等のデバイスに合わせて適用させるCSSを振り分ける方法をメモ。

コーディング・WordPress化作業を代行します

Media Queriesの記述方法

Media Queriesの記述方法には、外部CSSの読み込み時に振り分ける方法と、CSSファイル内で部分的に振り分ける方法があります。

↓外部CSSの読み込み時に振り分ける場合

<link href="css/style1.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 320px)" >
<link href="css/style2.css" rel="stylesheet" type="text/css" media="only screen and (min-height: 640px) and (max-width: 1024px)" >

↓CSSファイル内で部分的に振り分ける場合

@media screen and (max-device-width: 320px) {
  /*ここに内容*/
   div{
       ------
   }
}
@media screen and (min-height: 640px) and (max-width: 1024px) {
  /*ここに内容*/
   div{
       ------
   }
}

みたいな感じに記述すればOK。

Media Queriesの振り分け条件

Media Queriesの振り分け条件に指定できる主なパラメータはそれぞれ

max-width: ウィンドウサイズの最大幅。このサイズより小さい場合に適用
min-width: ウィンドウサイズの最小幅。このサイズより大きい場合に適用
max-height: ウィンドウサイズの最大高さ。このサイズより小さい場合に適用
min-height: ウィンドウサイズの最小高さ。このサイズより大きい場合に適用
max-device-width: デバイスサイズの最大幅。このサイズより小さい場合に適用
min-device-width: デバイスサイズの最小幅。このサイズより大きい場合に適用
max-device-height: デバイスサイズの最大高さ。このサイズより小さい場合に適用
min-device-height: デバイスサイズの最小高さ。このサイズより大きい場合に適用
device-pixel-ratio: デバイスの解像度(webkit)
orientation: デバイスの向きで判定
portrait ・・・縦向き
landscape・・・横向き

IE6~8の対応

IE6~8はCSS3に対応してないので、Media QueriesをIEに対応させたい場合は
>css3-mediaqueries-js
このプラグインを使用すればOK

<!--[if lt IE 9]>
<script src="js/css3-mediaqueries.js"></script>
<![endif]-->

みたいな感じでIE9以下に読み込ませてあげます。

コーディング・WordPress化作業を代行します

CSSのおすすめ参考書

TAGS

.htaccess ActionScript All in one seo pack Contact Form 7 CSS CSS3 EC-CUBE Flash HTML HTML5 JavaScript jQuery LightBox PHP RSS SEO WordPress アイキャッチ画像 アクセス解析 カスタムフィールド カテゴリー カラーミーショップ カート コメント ショートコード ソースコード テンプレートタグ ドロップダウンメニュー パーマリンク フォーム フルスクリーン プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 角丸 関連記事