本地响应式正常的网页经Filezilla上传服务器后失效的技术问询

我之前也碰到过一模一样的情况——本地调试响应式完全正常，上传到服务器就失效，折腾了好一会儿才找到原因，给你几个排查方向：

1. 缓存问题（最常见） #

服务器或者你的浏览器很可能缓存了旧版本的CSS文件，导致新的媒体查询代码没生效。解决办法：

• 强制刷新页面：按 Ctrl + F5（Windows）或 Cmd + Shift + R（Mac），跳过缓存加载最新资源。
• 给CSS文件加版本号，强制浏览器加载新文件：

  <link rel="stylesheet" type="text/css" href="stile.css?v=1.0.1">
  

  每次修改CSS后，把版本号改一下就行。

2. 文件路径/大小写问题 #

服务器（尤其是Linux系统）是区分大小写的，而本地Windows系统不区分。比如你本地的CSS文件叫stile.css，但上传到服务器后变成了Stile.css，浏览器就会加载失败，自然没有响应式效果。

• 打开浏览器开发者工具（F12），切换到「Network」标签，刷新页面，查看stile.css的状态：如果是404错误，就是路径/大小写不匹配，修正路径即可。

3. CSS样式优先级冲突 #

检查你的CSS代码里，有没有其他优先级更高的样式覆盖了媒体查询里的规则。比如：

• 有没有用!important标记的样式，强制覆盖了媒体查询的属性；
• 有没有更具体的选择器（比如.container .column_left）比你媒体查询里的.column_left优先级更高。

可以用开发者工具的「Elements」标签，选中对应的元素，查看「Styles」面板里的样式，看看媒体查询的规则是不是被划掉了（被覆盖的标志）。

4. 再确认媒体查询语法与顺序 #

你已经去掉了only screen，语法上是没问题的，但可以确认一下媒体查询的顺序是否合理：CSS是后面的规则覆盖前面的，建议把范围更精准的查询放在后面，比如：

/* 先写较大范围的规则 */
@media (max-width: 2000px) { 
  .column_left { width: 100%; height: auto; } 
  .column_right { width: 100%; height: auto; } 
  .foto { width: 150px; height: 75px; } 
  footer { background-color: lightgreen; } 
}
/* 再写更小范围的规则 */
@media (max-width: 1000px) { 
  .title { margin: 10px; } 
  .subtitle { display: none; } 
}
/* 最后写超大屏幕的规则 */
@media (min-width: 2500px) { 
  .foto { width: 150px; height: 75px; } 
}

先按上面的步骤排查，大概率是缓存或者路径问题，先从这两个方向入手！

内容的提问来源于stack exchange，提问作者Lorenzo