Question

我正在尝试理解为什么我的页面在我使用台式机时加载了错误的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正在加载/我出错了吗？

感谢。

Answer 1

虽然直觉上您可能认为浏览器只会下载他们需要的CSS文件，但似乎大多数浏览器都会吮吸所有CSS文件，然后根据视口应用相关样式。对this page的评论给出了一些更多的技术背景。

虽然它可能有意义。另一种方法是，每次更改窗口宽度时，浏览器都必须返回并检查头部内容并查看是否应下载不同的CSS文件。

所以，即使您看到正在下载rh-mobile.css样式表，但根据您发布的内容，我无法看到它的实际应用程序将被应用。

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

祝你好运！

加载了错误的CSS文件

1 个答案: