网站响应式设计的错误答案

【问题标题】：Bug with the responsive design of website网站响应式设计的错误
【发布时间】：2018-05-10 08:00:53
【问题描述】：

我创建了这个关于保加利亚语 Java 教程的网站，但我的响应式设计存在错误。当我在另一个宽度和高度不同的设备上打开它时，它变得非常糟糕。我试图解决它，我认为主要问题是边距，但我仍然不知道如何解决它。请帮帮我。

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>

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-align: center;
margin-top: 30px;
font-size: 20pt;
font-family: cursive;
}
#why {
margin-top: 40px;
margin-left: 20%;
font-size: 22pt;
margin-right: 21.63%;

}
#check-text-1 {
float: right;  
margin-right:12.26%;
margin-top: 5px;

}
#check-text-2 {
float: right;
margin-right:17.34%;
margin-top: 5px;
}
#check-text-3 {
float: right;
margin-right:12%;
margin-top: 5px;
}
#check-text-4 {
float: right;   
margin-right: 9.5%;
margin-top: 5px;
}
a:link {
text-decoration: none;
}

a:visited {
text-decoration: none;
}

a:hover {
text-decoration: none;
color: #3ab913;
}

a:active {
text-decoration: none;

}

GITHUB：https://github.com/Vayloan/Vayloan.github.io

【问题讨论】：

标签： html css mobile responsive-design responsive

【解决方案1】：

关于您的设计的响应能力，有很多因素会导致问题，例如在高度/宽度中使用像素而不是 %。如果您希望根据屏幕大小放大或缩小某些东西，您应该了解media-queries。

如果您有更具体的问题我可以回答，我很乐意提供帮助，但这里不适合提出“我的设计不好，请帮我解决问题”之类的非常宽泛的问题。

始终具有响应式网站的视口元标记，以适应不同的屏幕尺寸：

<meta name="viewport" content="width=device-width, initial-scale=1">

您可以阅读here 它是如何工作的以及为什么它很重要。

另外，这不是一个有效的标签：

<lang="bg"></lang>

将语言属性放在你的 html 标签中，如下所示：

<html lang="bg">

【讨论】：