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

【问题标题】：media query failing to load correct css媒体查询无法加载正确的 CSS
【发布时间】：2013-03-23 06:39:44
【问题描述】：

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

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

【问题讨论】：

您的屏幕宽度是否大于480px 或者1280px？如果是这样，它将不会加载，因为您已经“结束”了您的 max-device-width 以便参与 css。
对，如果你在浏览器中测试，请max-width
通过将其从 max-device-width 更改为 max-width - 它的工作。你能解释一下区别吗？
max-width 基于浏览器窗口的实际当前显示大小，而max-device-width 基于设备实际可以显示的最大数量。因此，如果一个人的屏幕分辨率为1280，即max-device-width，即使实际浏览器窗口显示大小可能是该屏幕的50% (640 )，这就是 max-width 正在跟踪的内容。
为什么要加载不同的 css 文件，当事情可以通过一个 css 文件中的媒体查询来处理并服务于您试图通过不同文件实现的相同目的时。对此有何见解？

标签： css twitter-bootstrap responsive-design

【解决方案1】：

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

【讨论】：