加载了错误的CSS文件

我试图理解为什么我的页面在使用台式电脑时加载了错误的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')?>" />

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

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

---

谢谢

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

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

因此，尽管您看到正在下载rh-mobile.css样式表，但从您发布的内容来看，我看不出它是否真的会被应用

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

---

祝你好运

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

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

因此，尽管您看到正在下载rh-mobile.css样式表，但从您发布的内容来看，我看不出它是否真的会被应用

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

---

祝你好运

可能未终止的link href标记会干扰其他链接吗？对此不太熟悉，但它是基于屏幕分辨率还是视口？i、 e.

min device width

vs

min width

？ficuscr，我不这么认为，因为我尝试将其更改为设备，但仍然得到相同的结果…@dot您的doctype是什么？我不认为您可以这样工作。媒体查询进入css内部，而不是放在哪里。您必须加载所有css，并且它将根据媒体查询应用。未终止的链接href标记可能会干扰其他链接吗？对此不太熟悉，但它是基于屏幕分辨率还是视口？i、 e.

min device width

vs

min width

？ficuscr，我不这么认为，因为我尝试将其更改为设备，但仍然得到相同的结果…@dot您的doctype是什么？我不认为您可以这样工作。媒体查询进入css内部，而不是放在哪里。您必须加载所有css，并且它将根据媒体查询应用

[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