Django多环境下CSS失效：移动端表格列隐藏功能不生效

使用Django框架开发，希望通过CSS媒体查询在移动端视图中隐藏表格第一列。项目配置了base、dev、prod三个设置文件，核心配置在base中，dev与prod仅数据库配置不同（本地PostgreSQL和Railway远程PostgreSQL）。

已完成的配置 #

1. base.html静态文件引入：

<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'main/css/base.css' %}">
<link rel="shortcut icon" type="image/png" href="{% static 'main/img/favicon.ico' %}"/>

2. base.css媒体查询规则：

@media only screen and (max-width: 800px) {
  td:nth-child(1) {
    display:none;
  }
  th:nth-child(1) {
    display:none;
  }
}

3. 静态文件配置（base.py中）：

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATICFILES_DIRS = [
    os.path.join(BASE_DIR), 'static'
]

现象 #

• dev环境下，移动端隐藏表格列的功能正常生效
• prod环境（本地运行prod配置、服务器端运行）均不生效，已执行collectstatic命令并推送代码至服务器

仅数据库配置不同的情况下，为何CSS媒体查询无法生效？

1. 静态文件路径配置错误 #

你的STATICFILES_DIRS存在语法错误：

STATICFILES_DIRS = [
    os.path.join(BASE_DIR), 'static'
]

上述写法会让数组包含两个独立元素：BASE_DIR和'static'，Django会去错误路径检索静态文件，导致collectstatic无法正确收集base.css到staticfiles目录。修正为：

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static')
]

重新执行collectstatic后，prod环境就能加载到正确的CSS文件。

2. 浏览器缓存问题 #

prod环境下浏览器可能缓存了旧版CSS，即使服务器文件已更新。解决方式：

• 浏览器强制刷新（Ctrl+F5 / Cmd+Shift+R）
• 开启Django静态文件版本控制，在base.py中添加：

STATICFILES_STORAGE = 'django.contrib.staticfiles.storage.ManifestStaticFilesStorage'

执行collectstatic后，静态文件URL会带上哈希值，彻底避免缓存冲突。

3. CSS优先级冲突 #

Bootstrap的默认样式优先级可能高于你的自定义规则，导致媒体查询被覆盖。可以提升选择器权重：

@media only screen and (max-width: 800px) {
  table td:nth-child(1) {
    display:none !important;
  }
  table th:nth-child(1) {
    display:none !important;
  }
}

或者给表格添加自定义类名，用更具体的选择器（如.custom-table td:nth-child(1)）来确保规则生效。

4. 本地prod环境的静态文件服务问题 #

本地运行prod配置时，Django默认不会自动提供STATIC_ROOT下的静态文件服务。如果用runserver启动，需要加上--insecure参数：

python manage.py runserver --settings=your_project.prod --insecure

否则Django无法加载staticfiles目录中的静态资源。

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