1

我试图了解为什么我的页面在使用台式电脑时加载了错误的 css 文件。

这是我的代码：

<link href="<?php echo base_url('assets/css/bootstrap.css')?>" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="<?php echo base_url('assets/css/rh-mobile.css')?>" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 481px) and (max-width: 767px)" href="<?php echo base_url('assets/css/rh-tablet.css')?>" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 768px) and (max-width: 3000px)" href="<?php echo base_url('assets/css/rh.css')?>" />

当我检查 Firefox 的 Web 控制台时，我可以看到我收到了一堆错误消息，例如：

[11:54:09.149] Error in parsing value for 'font-weight'.  Declaration dropped. @ https://myserver/myapp/assets/css/rh-mobile.css:13

[11:54:09.150] Unknown property '-moz-border-radius'.  Declaration dropped. @ https://myserver/myapp/assets/css/rh-mobile.css:22

[11:54:09.150] Error in parsing value for 'background-image'. Declaration dropped. @ https://myserver/myapp/assets/css/rh-mobile.css:74

[11:54:09.150] Unknown property '-moz-box-shadow'.  Declaration dropped. @ https://myserver/myapp/assets/css/rh-mobile.css:170

我没想到它会尝试使用移动 CSS。我的桌面屏幕分辨率是 1920 X 1200。

你能告诉我为什么 rh-mobile.css 被加载/我哪里出错了吗？

谢谢。

4

1 回答 1

1

虽然直觉上你可能认为浏览器只会下载他们需要的 CSS 文件，但似乎大多数浏览器会吸收所有的 CSS 文件，然后根据视口应用相关的样式。此页面上的评论提供了更多技术背景。

不过，也许这是有道理的。另一种方法是，每次更改窗口宽度时，浏览器都必须返回并检查头部内容，看看它是否应该下载不同的 CSS 文件。

因此，即使您看到正在下载 rh-mobile.css 样式表，但从您发布的内容来看，我看不出它的样式实际上会被应用。

如果您确实需要完全控制正在加载的 CSS 文件，可以使用Adapt.js或YepNope或Modernizr等选项。它们都是在指定 CSS、JS 或其他文件的详细信息之前使用 javascript 测试视点宽度的相同想法的变体。

祝你好运！

于 2013-03-28T02:34:06.503 回答