保加利亚语Java教程网站响应式设计Bug技术求助

云上老周

2026-5-27

响应式设计Bug求助：边距问题导致多设备显示异常

我开发了一个保加利亚语的Java教程网站，但现在遇到了头疼的响应式设计问题——在不同宽高的设备上打开时，页面显示效果极差。我自己排查了一圈，觉得核心问题应该出在margin（边距）的设置上，但实在摸不着头绪，恳请各位大佬帮忙看看！

我的代码片段

HTML代码

<html> 
<head> 
<!--Language, title, link, meta--> 
<lang="bg"></lang> 
<title>Vayloan - Научи Java онлайн</title> 
<meta charset="utf-8"> 
<link rel="stylesheet" type="text/css" href="css/index-style.css"> 
<link rel="shortcut icon" href="css/img/favicon.ico"> 
<meta name="keywords" content="vayloan, java, tutorials, free"> 
<meta name="application-name" content="vayloan"> 
<meta name="msvalidate.01" content="889BFB699C71E48B63966D2F50B87678" /> 
<meta name="author" content="hristo todorov, yanis yakimov"> 
<meta name="description" content="Vayloan е безплатна платформа, с помощта на която можеш да се научиш да програмираш на Java"> 
</head> 
<body> 
<!--Header with navigation tab--> 
<div id="header"> 
<nav> 
<div id="logo"> 
<a href="index.html"><img src="css/img/logo.png" width="80px" height="80px"></a> 
</div> 
<ul> 
<li><a href="index.html">Начало</a></li> 
<li><a href="lessons.html">Уроци</a></li> 
<li><a href="exercises.html">Упражнения</a></li> 
<li><a href="contact-us.html">Свържете се с нас</a></li> 
</ul> 
</nav> 
</div> 
<!--Transperent background with name and slogan--> 
<div id="header-desc"> 
<div id="trans"> 
<!--Blank space--> 
<div id="blank-1"> 
</div> 
<h1>Vayloan</h1> 
<h2>Научи Java онлайн</h2> 
</div> 
</div> 
<!--Another blank space--> 
<div id="another-bs"> 
</div> 
<!--Main content--> 
<div id="content"> 
<div id="question"> 
<strong>Какво е Vayloan?</strong> 
</div> 
<div id="answer"> 
Vayloan е образователна платформа, която ще Ви помогне да научите Java бързо и лесно. 
<br> 
<br> 
Ето с какво Vayloan се различава от другите образователни платформи: 
</div> 
<div id="why"> 
<img src="css/img/check.png" id="check"> 
<div id="check-text-1"> 
<strong>Кратки и лесноразбираеми видео уроци на български</strong> 
</div> 
<br> 
<br> 
<img src="css/img/check.png" id="check"> 
<div id="check-text-2"> 
<strong>Упражнения, с които да затвърдите новите знания</strong> 
</div> 
<br> 
<br> 
<img src="css/img/check.png" id="check"> 
<div id="check-text-3"> 
<strong>Можете да задавате въпроси и да давате предложения</strong> 
</div> 
<br> 
<br> 
<img src="css/img/check.png" id="check"> 
<div id="check-text-4"> 
<strong>Видео уроци, както за начинаещи така и за напреднали</strong> 
</div> 
<br> 
</div> 
</div> 
<!--Footer--> 
<div id="footer"> 
<div id="bs"> 
</div> 
<h6>Copyright &copy; 2018 | Изработен от Христо Тодоров и Янис Якимов | Проект №84 за НОИТ</h6> 
<div id="contact"> 
<a href="https://www.facebook.com/Vayloan-1951527885163461/"><img src="css/img/fb.png"></a> 
<a href="https://github.com/Vayloan"><img src="css/img/github.png"></a> 
<a href="https://www.youtube.com/channel/UCWt3DkdlMsordyw967G1akg"><img src="css/img/yt.png"></a> 
</div> 
</div> 
</body> 
</html>

CSS代码（未完成片段）

h1 { text-align: center; color: white; font-size: 40pt; font-family: sans-serif; } 
#header-desc { background-image: url(img/header-bg.jpg); height: 760px; background-attachment: fixed; background-size: cover; } 
body { margin: 0 auto; } 
#blank-1 { height: 280px; } 
h2 { text-align: center; font-size: 25pt; color: white; font-family: cursive; } 
#trans { height: 760px; background-color:rgba(0, 0, 0, 0.40); } 
#header { height: 80px; background-color: #011222; color: rgba(255,255,255,0.75); position: fixed; width: 100%; } 
ul li { list-style: none; display: inline-block; float: left; line-height: 100px; margin-top: -99px; margin-left: 80px; } 
ul li a { display: block; text-decoration: none; font-size: 14px; font-family: arial; color: #ffffff; padding: 0px; } 
#footer { background-color: #011222; height: 250px; text-align: center; color: white; font-size: 17pt; } 
#bs { height: 100px; } 
#contact { float: right; margin-right: 50px; } 
h3 { text-align:center; font-size: 27pt; } 
#bs-2 { height: 30px; } 
#content { height:655px; background-image: url(img/contact-bg.png); } 
#another-bs { height:100px; background-image: url(img/contact-bg.png); } 
#logo { margin-left: 10px; } 
#question { text-align: center; font-size: 28pt; font-family: monospace; } 
#answer { text-a

问题分析与修复方案

先帮你拆解下当前代码里导致响应式失效的核心问题，再给出具体的修复步骤：

1. 导航栏的边距硬编码是重灾区

你给ul li设置了margin-left: 80px和margin-top: -99px，这两个固定值在小屏幕上直接会让导航项挤成一团甚至溢出屏幕。而且margin-top: -99px完全是不合理的偏移，会导致导航项位置错乱。

修复方式：用Flex布局重构导航
把导航改成弹性布局，让元素自动适配屏幕宽度，去掉硬编码的margin：

#header nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 20px; /* 用内边距代替固定margin，更灵活 */
}

#header ul {
  display: flex;
  gap: 2rem; /* 用gap控制导航项之间的间距，适配不同屏幕 */
  margin: 0;
  padding: 0;
}

#header ul li {
  list-style: none;
  line-height: 80px; /* 和header高度一致，实现垂直居中 */
  margin: 0; /* 清除原有错误的margin */
  float: none; /* 去掉浮动，用flex控制布局 */
}

2. 固定高度导致内容溢出

你给很多容器设置了固定高度（比如#header-desc的760px、#content的655px），在小屏幕上内容很容易超出容器范围，导致显示异常。

修复方式：替换固定高度为自适应
把固定高度改成最小高度，或者让内容自然撑开容器：

#header-desc {
  background-image: url(img/header-bg.jpg);
  min-height: 760px; /* 保留最小高度，内容多的时候自动增高 */
  background-attachment: fixed;
  background-size: cover;
  display: flex;
  align-items: center; /* 让内部文字垂直居中，代替原来的blank-1空白div */
}

#trans {
  width: 100%;
  background-color:rgba(0, 0, 0, 0.40);
  padding: 2rem 0; /* 用内边距控制上下间距 */
}

#blank-1 {
  display: none; /* 不需要这个空白div了 */
}

#content {
  min-height: 655px; /* 改成最小高度 */
  background-image: url(img/contact-bg.png);
  padding: 2rem; /* 给内容加内边距，避免贴边 */
}

3. 缺少媒体查询适配小屏幕

没有针对手机等小屏幕设备做布局调整，这是响应式的核心缺失。

添加媒体查询示例：

/* 针对手机屏幕（宽度小于768px） */
@media (max-width: 768px) {
  /* 导航改成垂直排列 */
  #header ul {
    flex-direction: column;
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
    background-color: #011222;
    display: none; /* 默认隐藏，后续可以加汉堡按钮控制显示 */
  }

  #header ul li {
    line-height: 60px;
    text-align: center;
    width: 100%;
  }

  /* 缩小字体，适配小屏幕 */
  h1 {
    font-size: 28pt;
  }

  h2 {
    font-size: 18pt;
  }

  #question {
    font-size: 20pt;
  }

  /* 调整footer的contact边距 */
  #contact {
    float: none;
    margin: 1rem 0;
  }
}

4. 其他细节修复

#logo的margin-left: 10px可以改成margin-right: auto，配合flex布局更合理；
#answer的代码没写完，记得补全，避免语法错误；
所有的固定像素值尽量换成相对单位（比如rem、%），适配不同屏幕的字体大小设置。

按照这些步骤调整后，你的网站应该能在不同设备上正常显示了，要是还有其他问题可以再补充细节！

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

保加利亚语Java教程网站响应式设计Bug技术求助

我的代码片段 #

HTML代码 #

CSS代码（未完成片段） #

问题分析与修复方案 #

1. 导航栏的边距硬编码是重灾区 #

2. 固定高度导致内容溢出 #

3. 缺少媒体查询适配小屏幕 #

4. 其他细节修复 #