网页跨多屏幕适配异常：响应式代码效果不佳请求评审优化

原代码核心问题 #

• 字体导入URL缺失//，Poppins字体无法正常加载
• Header使用固定左右内边距100px，小屏幕下内容被过度挤压
• Logo字体大小无响应式调整，移动端会占用过多空间
• 导航菜单无折叠逻辑，小屏幕下会杂乱堆叠
• 绝对定位的Header会遮挡页面主体内容

优化后完整代码 #

HTML（新增汉堡按钮）

<header>
  <a href="#" class="logo">LOGO</a>
  <!-- 汉堡按钮，仅移动端显示 -->
  <button class="hamburger" aria-label="打开菜单">
    <span></span>
    <span></span>
    <span></span>
  </button>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="search.html">Search</a></li>
    <li><a href="videos.html">Videos</a></li>
  </ul>
</header>

CSS（修复+响应式适配）

/* 修复字体导入URL */
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap');

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

body {
  font-family: 'Poppins', Arial, sans-serif; /* 优先使用Poppins字体 */
  background-color: #f0f0f0;
  padding-top: 80px; /* 避免Header遮挡主体内容 */
}

/* Header基础样式 */
header {
  position: fixed; /* 改成固定定位，始终保持在顶部 */
  top: 0;
  left: 0;
  width: 100%;
  padding: 15px 5%; /* 使用百分比内边距，适配不同屏幕 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color: #fff;
  transition: all 0.3s ease;
}

header .logo {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  font-size: 1.8em; /* 调整基础大小 */
  text-transform: uppercase;
  letter-spacing: 2px;
}

header .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
}

header .nav-links li {
  list-style: none;
  margin-left: 20px; /* 改成左边距，避免最后一个元素多余间距 */
}

header .nav-links li a {
  text-decoration: none;
  padding: 6px 15px;
  color: #fff;
  border-radius: 20px;
  transition: all 0.3s ease;
}

header .nav-links li a:hover {
  background: #fff;
  color: #333;
}

/* 汉堡按钮样式，默认隐藏 */
.hamburger {
  display: none;
  flex-direction: column;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 5px;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background: #fff;
  margin: 3px 0;
  transition: all 0.3s ease;
}

/* 媒体查询：适配平板及以下屏幕（768px为断点，可根据需求调整） */
@media (max-width: 768px) {
  /* 显示汉堡按钮 */
  .hamburger {
    display: flex;
  }

  /* 默认隐藏导航菜单 */
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #333;
    flex-direction: column;
    padding: 20px 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }

  /* 菜单激活状态（配合JS，若不需要JS可改用checkbox实现） */
  .nav-links.active {
    opacity: 1;
    visibility: visible;
  }

  header .nav-links li {
    margin: 10px 0; /* 垂直布局，调整间距 */
  }

  header .logo {
    font-size: 1.5em; /* 移动端缩小Logo */
  }
}

关键优化点说明 #

• 修复字体加载：补全字体URL的//，确保Poppins字体正常加载，并设置为优先字体
• 响应式内边距：将Header的左右内边距改为百分比，适配不同屏幕宽度
• 固定定位+主体内边距：把Header改为固定定位，同时给body添加顶部内边距，避免遮挡页面内容
• 汉堡菜单适配：在小屏幕下隐藏默认导航列表，显示汉堡按钮，通过CSS过渡实现菜单展开/收起效果（若需要交互，可添加几行JS切换active类）
• 字体大小响应式调整：移动端缩小Logo字体，避免占用过多空间
• 统一间距逻辑：将导航项的右边距改为左边距，避免最后一个元素出现多余间距
• 过渡动画：给Header、导航链接、汉堡按钮添加过渡效果，提升交互体验

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