Question

我刚刚阅读了文章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

你能告诉我哪里出错吗？

Answer 1

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

媒体查询无法加载正确的CSS

1 个答案: