按屏幕宽度加载指定CSS文件失效，求正确实现方式

1. 路径分隔符错误（核心原因） #

HTML 中引用资源的路径必须使用正斜杠/，你代码里的反斜杠\无法被浏览器正确解析，这是样式文件不加载的主要问题。

2. 媒体查询重叠优化（可选） #

当前写法会导致屏幕宽度≥1000px时，平板和PC的样式文件同时加载，容易引发样式冲突。建议给平板的媒体查询加上宽度上限，明确各设备的区间范围。

修正后的完整代码： #

<link rel="stylesheet" media="screen and (max-width: 599px)" href="assets/css/phone-main.css">
<link rel="stylesheet" media="screen and (min-width: 600px) and (max-width: 999px)" href="assets/css/tablet-main.css">
<link rel="stylesheet" media="screen and (min-width: 1000px)" href="assets/css/pc-main.css">

额外排查项： #

• 确认assets/css/目录下存在对应CSS文件，文件名拼写完全一致（部分服务器区分大小写）
• 打开浏览器开发者工具（F12），切换到「网络」标签刷新页面，查看CSS文件的请求状态，若显示404则说明路径或文件名有误

内容的提问来源于stack exchange，提问作者Timo van Campen