0

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だけです

どこが間違っているのか教えてもらえますか?

4

1 に答える 1

0

ブートストラップを使用している場合は、レスポンシブ ブートストラップを使用してみませんか? ところで、ベースURLは次のように書く必要があります<?php echo base_url("assets/css/bootstrap.css")?>

于 2013-03-22T22:39:44.820 に答える