Plotly Dash应用CSS移动端适配求助：导航栏与页脚布局调整问题

问题说明 #

该项目为Plotly Dash开发的新冠疫情数据可视化仪表盘，当前存在两类适配问题：

• 导航栏标题定位异常：标题上下间距不对等，左侧间距与汉堡按钮右侧间距不一致
• 页脚布局错乱：小屏设备下元素间距异常，极端场景会出现元素重叠，要求优先保持单行显示、元素永不重叠、上下间距均等

具体修复代码 #

导航栏适配修改 #

替换原有移动端媒体查询内的导航栏相关CSS即可：

@media only screen and (max-width: 500px) {
  /* 导航栏核心布局调整 */
  .navbar {
    flex-direction: row;
    flex-wrap: wrap;
    min-height: 45px;
    align-items: center;
    padding: 0 1rem;
  }
  .dashboard-title {
    font-size: 1rem;
    padding: 0.5rem 0;
    margin: 0;
  }
  .toggle-button {
    display: flex;
    position: static;
    margin-left: auto;
  }
  /* 原有菜单逻辑保留 */
  .navbar-links {
    width: 100%;
  }
  .navbar-links ul {
    width: 100%;
    flex-direction: column;
  }
  .navbar-links li{
    text-align: center;
  }
  .navbar-links li a{
    padding: .5rem 1rem;
  }
  .navbar-links.active {
    display: none;
  }
  /* 其他原有移动端样式保留 */
  H2{
    font-size: 15px;
  }

页脚适配修改 #

先修改桌面端页脚CSS，再补充移动端适配逻辑：

/* 桌面端页脚调整 */
#footer {
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  bottom: 0;
  width: 100%;
  background: var(--DarkBlue);
  color: white;
  min-height: 3.5rem;
  height: auto;
  padding: 0.5rem 1rem;
  box-sizing: border-box;
}

/* 移动端页脚补充，加在上述媒体查询内 */
  #footer-text {
    margin: 0;
    font-size: .8rem;
  }
  #find-me-on{
    padding-right: 10px;
    font-size: .75rem;
    margin: 0;
  }
  #footer-links{
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  #footer-links img {
    height: 1.5rem !important;
  }
}

修复逻辑 #

1. 导航栏取消汉堡按钮绝对定位，改用弹性布局自动对齐，左右内边距统一保证对称，标题固定上下内边距实现垂直居中
2. 页脚取消固定高度改为最小高度，新增元素间距属性避免重叠，小屏缩小图标和字体尺寸优先适配单行显示，宽度不足时自动换行且高度自适应不会出现重叠

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