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;
}

两者之间唯一不同的是正在加载的图像。移动 css 加载一个名为 ipod5.jpg 的文件，而桌面版加载另一个文件。

在 Firefox 中测试我的网站时，我注意到两个 CSS 都没有被加载。唯一正在加载的是 bootstrap.css

你能告诉我哪里出错了吗？

4

1 回答 1

0

如果您使用的是引导程序，为什么不使用响应式引导程序？顺便说一句，基本网址应该这样写<?php echo base_url("assets/css/bootstrap.css")?>

于 2013-03-22T22:39:44.820 回答