如何用Media Queries实现响应式垂直导航栏并解决横向滚动

1. 导航栏改为垂直布局 #

在你的移动端Media Query（可根据实际适配断点调整，比如@media (max-width: 768px)）中，修改导航容器的布局规则：

Flex布局方案（推荐） #

如果你的导航用Flex实现横向排列，直接修改方向为垂直：

@media (max-width: 768px) {
  /* 替换为你的导航容器类名 */
  .navbar {
    display: flex;
    flex-direction: column; /* 切换为垂直布局 */
    gap: 1rem; /* 调整导航项之间的垂直间距 */
    align-items: flex-start; /* 可选：左对齐导航项，默认是拉伸占满宽度 */
  }

  /* 优化导航项点击区域 */
  .navbar a {
    margin: 0; /* 清除桌面版的横向外边距 */
    padding: 0.5rem 0; /* 增加垂直内边距，提升点击体验 */
    width: 100%; /* 可选：让导航项占满容器宽度，方便点击 */
  }
}

浮动布局兼容方案 #

如果你的导航用浮动实现横向排列，清除浮动并改为块级显示：

@media (max-width: 768px) {
  /* 替换为你的导航项父元素类名 */
  .navbar li {
    float: none;
    display: block;
    margin-bottom: 1rem; /* 增加垂直间距 */
  }
}

2. 消除博客内容横向滚动 #

横向滚动通常是元素宽度超出视口导致的，按以下步骤修复：

步骤1：全局统一盒模型 #

在CSS开头添加全局规则，避免padding/border额外增加元素宽度：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

步骤2：限制博客容器及内部元素宽度 #

在移动端Media Query中，给博客内容容器及内部元素设置宽度限制：

@media (max-width: 768px) {
  /* 替换为你的博客内容容器类名 */
  .blog-content {
    max-width: 100vw; /* 限制为视口宽度 */
    overflow-x: hidden; /* 隐藏横向溢出内容 */
    padding: 0 1rem; /* 给左右留空白，避免内容贴边 */
  }

  /* 处理图片、视频等媒体元素 */
  .blog-content img,
  .blog-content video {
    max-width: 100%;
    height: auto; /* 保持宽高比，避免拉伸变形 */
  }

  /* 处理长文本或代码块 */
  .blog-content p,
  .blog-content pre {
    overflow-wrap: break-word; /* 自动换行长单词 */
    word-break: break-all; /* 可选：强制换行，适合英文长单词或URL */
  }
}

步骤3：排查特殊元素 #

检查是否存在固定宽度的元素（比如width: 1200px），在移动端需改为width: 100%或max-width: 100%；若有绝对定位元素，确保其right/left值不会导致超出视口范围。

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