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

我刚读了这篇文章 我试着测试一些想法。我想根据浏览我的网站的设备的大小加载不同的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" />

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

在firefox中测试我的站点时，我注意到没有加载css。唯一正在加载的是bootstrap.css

---

你能告诉我哪里出了问题吗

如果您使用的是引导，为什么不直接使用响应引导呢？

---

顺便说一句，基本url应该这样写

您的屏幕宽度是否大于

480px

或者

1280px

？如果是这样，它将不会被加载，因为您的

max device width

已“超过”要使用的css。对，如果您在浏览器中进行测试，请将

max width

从max device width更改为max width-其工作状态。您能解释一下区别吗？

max width

基于浏览器窗口的实际当前显示大小，而

max device width

基于设备实际显示的最大数量。因此，如果一个人的屏幕分辨率是

1280

，那就是

最大设备宽度

，即使实际的浏览器窗口显示大小可能是该屏幕的50%（

640

），这就是

最大宽度

所跟踪的。为什么加载不同的css文件，当事情可以在一个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;
}