実際のCSSの振り分け方

実際のソースの書き方

今回iPod touch,iPhone専用にCSSファイルを作成して、iPod touch,iPhoneにのみそのCSSファイルを見せるために、以下のソースで対応しています。


<link href="./c/ipodtouch.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" />
<link href="./c/base.css" rel="stylesheet" type="text/css" media="screen and (min-device-width: 481px)" />
<!--[if IE]>
<link href="./c/base.css" rel="stylesheet" type="text/css" />
<![endif]-->


一番最初の media="only screen and (max-device-width: 480px)"でiPod touch,iPhone専用の外部CSSファイルを参照させています。(画面表示幅が480px以下の場合には・・・という設定)

画面表示が481pxより大きい場合は2番目の外部CSSファイルを参照させています。つまり通常のパソコン関連に参照させるCSSです。

本来であれば2番目までの外部CSSファイルへのリンク設定で事足りるのですが、このCSSのmediaクエリはIEは対応していないようで最後の


<!--[if IE]>・・・<![endif]-->


の記述が必要となってきてしまいました。