http://alistapart.com/article/responsive-web-designの記事を読み、 いくつかのアイデアを試してみました。サイトを閲覧しているデバイスのサイズに応じて、異なる css ファイルをロードしたいと考えています。
次のコードがあります。
<link href="<?php echo base_url()?>assets/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="<?php echo base_url()?>assets/css/rh-mobile.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 1280px)" href="<?php echo base_url()?>assets/css/rh.css" />
rh と rh-mobile css ファイルの両方に、次のクラスがあります。
.hero-unit {
background: url("../img/ipod5.jpg");
height: 4em;
width: 15em;
padding: 0.5em;
margin-bottom: 2em;
background-color: #eeeeee;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
この 2 つの違いは、読み込まれるイメージだけです。モバイル CSS は ipod5.jpg というファイルをロードし、デスクトップ バージョンは別のファイルをロードします。
Firefox でサイトをテストしているときに、どちらの CSS も読み込まれていないことに気付きました。ロードされているのはbootstrap.cssだけです
どこが間違っているのか教えてもらえますか?