如何在桌面与移动端正确调整Material for MkDocs侧边栏宽度？

你需要用**CSS媒体查询（Media Queries）**针对不同视口宽度设置侧边栏样式，这是适配响应式布局的标准做法，刚好匹配Material for MkDocs的响应式设计逻辑。

具体操作如下：

• 打开你引入的自定义CSS文件，替换之前的全局样式为以下代码：

/* 桌面端（视口宽度≥960px）设置自定义侧边栏宽度 */
@media screen and (min-width: 960px) {
  .md-sidebar {
    min-width: 320px;
  }
}

/* 移动端（视口宽度<960px）恢复主题默认布局，避免错乱 */
@media screen and (max-width: 959px) {
  .md-sidebar {
    min-width: auto;
  }
}

说明： #

Material for MkDocs默认的响应式断点是960px——当视口宽度小于这个值时，侧边栏会切换为抽屉式（点击汉堡菜单展开）。上面的代码中：

1. 桌面端（≥960px）保持你需要的320px最小宽度
2. 移动端（<960px）通过min-width: auto让侧边栏遵循主题的默认移动端布局，不会挤压页面内容或导致布局损坏

你也可以根据自己的需求调整断点数值，比如想在更大的屏幕才应用自定义宽度，就把min-width的值改成1200px之类的。

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