Material Design可关闭抽屉与顶部应用栏适配问题求助

我仔细分析了你遇到的问题：当窗口宽度小于599px时，顶部应用栏高度从64px变为56px，但调整抽屉位置的媒体查询没有生效，导致抽屉无法对齐。这大概率是CSS优先级冲突和高度计算基准不准确导致的，下面是具体的解决步骤：

1. 提升CSS选择器优先级 #

MDC组件的默认样式通常使用了更具体的选择器，你原来的.mdc-drawer--dismissible选择器优先级不够，被默认样式覆盖了。可以给选择器添加前缀，提升优先级：

@media all and (max-width: 599px) {
  /* 增加.mdc-drawer前缀，确保样式能覆盖MDC默认规则 */
  .mdc-drawer.mdc-drawer--dismissible {
    top: 56px;
    height: calc(100vh - 56px);
  }
}

2. 使用视口高度（vh）代替百分比计算 #

原来的100%是基于父容器的高度计算的，如果父容器没有明确设置高度，会导致计算偏差。改用100vh直接基于浏览器视口高度计算，能确保抽屉高度刚好填满应用栏下方的剩余空间。

3. 确保抽屉的定位属性正确 #

如果抽屉的position属性被其他样式修改，也会导致top值不生效。可以在媒体查询中明确指定固定定位：

@media all and (max-width: 599px) {
  .mdc-drawer.mdc-drawer--dismissible {
    position: fixed; /* 明确固定定位，确保top和height基于视口计算 */
    top: 56px;
    height: calc(100vh - 56px);
  }
}

额外检查项 #

• 清空浏览器缓存后测试，避免旧样式缓存影响结果
• 检查是否有其他自定义CSS规则意外修改了抽屉的top、height或position属性

按以上修改后，抽屉应该能在小屏幕下和顶部应用栏完美对齐了。

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