移动端页面加载时Card被Header遮挡的CSS适配问题（Django）

要实现移动端下.card在header下方，同时不改变桌面端布局，核心是用CSS媒体查询（Media Queries）——它能针对特定屏幕尺寸单独应用样式，不会影响其他尺寸的布局。

具体实现步骤 #

假设你的基础布局中，桌面端.card的位置已经符合需求，只需要在移动端调整它的位置：

1. 确定移动端的屏幕断点（通常用768px作为手机/平板的分界，可根据你的设计需求调整）
2. 在媒体查询内，针对.card设置专属样式，比如通过Flex布局的order属性调整显示顺序，或者修改position/margin等属性。

示例代码

假设你的HTML结构大致如下：

<header class="site-header">...</header>
<div class="content-container">
  <div class="sidebar">...</div>
  <div class="card">...</div>
</div>

对应的CSS可以这样写：

/* 桌面端默认样式（保持原有布局） */
.content-container {
  display: flex;
  gap: 20px;
}
.card {
  /* 桌面端的位置配置 */
  order: 2;
}
.sidebar {
  order: 1;
}

/* 移动端样式：屏幕宽度≤768px时生效 */
@media (max-width: 768px) {
  .content-container {
    flex-direction: column;
  }
  .card {
    /* 将card移到容器最前，自然出现在header下方 */
    order: -1;
    margin-top: 15px;
  }
}

关键说明 #

• 媒体查询的max-width值可以根据你的设计需求修改（比如640px对应小屏手机）
• 如果你的布局未使用Flex，也可以通过其他方式调整：比如在移动端给.card设置position: relative调整偏移，或者调整DOM顺序后用媒体查询在桌面端重新排列（Flex的order属性是最简洁的方案）
• Django框架不影响前端响应式布局，只需将这段CSS放入你的静态文件中正常引入即可

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