Question

当我在浏览器（谷歌浏览器）中以100％运行此代码时，它很好。然而，当我最小化它时，div就到处都是。我不确定它是否是meta标签，如果我遗漏了什么，或者我在代码中包含了不应该存在的东西。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<meta http-equiv="cache-control" content="public">
<meta http-equiv="pragma" content="cache">
<meta http-equiv="content-language" content="en">
<meta name="description" content="A Website Designed For Young People To Enjoy Themselves Through Irish">
<meta name="keywords" content="Youth Zone, Crios Óige, Irish, Gaeilge, Irish Videos, Fun with Irish">
<meta name="author" content="Edward Leonard">
<meta name="robots" content="index, follow">
<meta name="googlebot" content="archive">
<meta charset="UTF-8">
<title>Crios Óige | Abhaile</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body bgcolor="#009900";>
<div id="divide1">
</div>
<div id="divide2">
</div>
<div id="header">
    <img src="file:///E:/Crios%20Óige/Crios%20Oige%20Images/Logo.png" id="logo">
    <img src="file:///E:/Crios%20Óige/Crios%20Oige%20Images/Title.PNG" id="title">
    <img src="http://www.youtharts.ie/sites/youtharts.ie/files/NYCI%20Logo%20Full%20JPG_2.jpg" id="youthcouncil">
</div>
<div id="toolbar">
    <div id="homebutton">
        <div id="homebuttonlink">
            <b><a href="index.html" id="homebuttonlinkstyle">Abhaile</a></b>
        </div>
    </div>
    <div id="videosbutton">
        <div id="videosbuttonlink">
            <b><a href="videos.html"; id="videosbuttonlinkstyle">Fiseán</a></b>
        </div>
    </div>
    <div id="imagesbutton">
        <div id="imagesbuttonlink">
            <b><a href="images.html"; id="imagesbuttonlinkstyle">Pictiúir Greannmhar</a></b>
        </div>
    </div>
    <div id="gamesbutton">
        <div id="gamesbuttonlink">
            <b><a href="games.html"; id="gamesbuttonlinkstyle">Cluichí</a></b>
        </div>
    </div>
    <div id="sportbutton">
        <div id="sportbuttonlink">
            <b><a href="sport.html"; id="sportbuttonlinkstyle">Spórt</a></b>
        </div>
    </div>
    <div id="contactusbutton">
        <div id="contactusbuttonlink">
            <b><a href="contactus.html"; id="contactusbuttonlinkstyle">Déan teagmháil linn</a></b>
        </div>
    </div>
</div>
<div id="aboutus">
    <div id="aboutustitle">
        <p id="aboutustitlestyle">Maidir Linne</p>
    </div>
    <p id="aboutuscontent">***************************************************************************************************************************************************************************************************************************************************************************************************************************</p>
</div>
</body>
</html>

这是附带的CSS

body {
text-align: justify;
}
a {
text-decoration: none;
}
a:link {
color:#FF0000;
}    /* unvisited link */
a:visited {
color:#4D0000;
} /* visited link */
a:hover {
color:#0000FF;
}   /* mouse over link */
a:active {
color:#FF0000;
}  /* selected link */
#header {
height: 100px;
width: 100%;
background-color: #993333;
margin-top: -10px;
}
#toolbar {
height: 151px;
width: 51.29%;
background-color: #FF0000;
position: relative;
top: -10px;
margin-right: auto;
margin-left: auto;
}
#homebutton {
height: 80px;
width: 27%;
background-color: #0000FF;
position: relative;
top: -19px;
margin: 21px;
float: left;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#videosbutton {
height: 80px;
width: 27%;
background-color: #0000FF;
position: relative;
top: -19px;
margin: 21px;
float: left;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#imagesbutton {
height: 80px;
width: 27%;
background-color: #0000FF;
position: relative;
top: -19px;
margin: 21px;
float: left;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#gamesbutton {
height: 69px;
width: 27%;
background-color: #0000FF;
position: relative;
top: -61px;
margin: 21px;
float: left;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#sportbutton {
height: 69px;
width: 27%;
background-color: #0000FF;
position: relative;
top: -61px;
margin: 21px;
float: left;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#contactusbutton {
height: 69px;
width: 27%;
background-color: #0000FF;
position: relative;
top: -61px;
margin: 21px;
float: left;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#homebuttonlink {
height: 30px;
width: 77%;
background-color: #FFFF00;
position: relative;
float: left;
display: inline-block;
margin: 10px;
padding: 10px;
top: 5px;
border-radius: 5px;
overflow: hidden;
text-overflow: ellipsis;
}
#videosbuttonlink {
height: 30px;
width: 77%;
background-color: #FFFF00;
position: relative;
float: left;
display: inline-block;
margin: 10px;
padding: 10px;
top: 5px;
border-radius: 5px;
overflow: hidden;
text-overflow: ellipsis;
}
#imagesbuttonlink {
height: 30px;
width: 77%;
background-color: #FFFF00;
position: relative;
float: left;
display: inline-block;
margin: 10px;
padding: 10px;
top: 5px;
border-radius: 5px;
overflow: hidden;
text-overflow: ellipsis;
}
#gamesbuttonlink {
height: 30px;
width: 77%;
background-color: #FFFF00;
position: relative;
float: left;
display: inline-block;
margin: 10px;
padding: 10px;
top: -6px;
border-radius: 5px;
overflow: hidden;
text-overflow: ellipsis;
}
#sportbuttonlink {
height: 30px;
width: 77%;
background-color: #FFFF00;
position: relative;
float: left;
display: inline-block;
margin: 10px;
padding: 10px;
top: -6px;
border-radius: 5px;
line-height: -10px;
overflow: hidden;
text-overflow: ellipsis;
}
#contactusbuttonlink {
height: 30px;
width: 77%;
background-color: #FFFF00;
position: relative;
float: left;
display: inline-block;
margin: 10px;
padding: 10px;
top: -6px;
border-radius: 5px;
overflow: hidden;
text-overflow: ellipsis;
}
#contactusbuttonlinkstyle {
font-size: 17px;
font-family: Verdana, Geneva, sans-serif;
line-height: 10px
}
#sportbuttonlinkstyle {
font-size: 30px;
font-family: Verdana, Geneva, sans-serif;
}
#gamesbuttonlinkstyle {
font-size: 30px;
font-family: Verdana, Geneva, sans-serif;
}
#imagesbuttonlinkstyle {
font-size: 17px;
font-family: Verdana, Geneva, sans-serif;
line-height: 10px;
}
#videosbuttonlinkstyle {
font-size: 30px;
font-family: Verdana, Geneva, sans-serif;
}
#homebuttonlinkstyle {
font-size: 30px;
font-family: Verdana, Geneva, sans-serif;
}
#divide1 {
height: 1291px;
width: 25.125%;
background-color: #330066;
position: relative;
margin: -10px;
float: left;
top: -10px;
}
#divide2 {
height: 1291px;
width: 25.125%;
background-color: #330066;
position: relative;
margin: -10px;
float: right;
top: -10px;
}
#aboutus {
height: 200px;
width: 400px;
margin: 475px;
background-color: aqua;
top: -450px;
position: relative;
border-radius: 10px;
}
#aboutustitle {
height: 40px;
width: 200px;
background-color: red;
position: relative;
margin-left: 100px;
top: 10px;
border-radius: 20px;
}
#aboutuscontent {
word-wrap: break-word; 
margin-left: 20px; 
margin-right: 20px
}
#aboutustitlestyle {
font-size: 20px;
color: yellow;
font-family: Verdana, Geneva, sans-serif;
margin-left: 40px;
line-height: 35px;
}
#youthcouncil {
height: 80px;
width: 180px;
margin-left: 300px;
margin-top: 5px;
}
#logo {
height: 80px;
width: 180px;
margin-left: 20px;
margin-top: 5px;
}
#title{
height: 80px;
width: 180px;
margin-left: 250px;
margin-top: 5px;
}

Answer 1

您缺少的一个元标记是视口：

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

另一个问题是您的设计没有响应。每次设计中断时，都应使用媒体查询添加断点。这基本上意味着你应该开始最小化你的屏幕（你可以使用不同的分辨率和移动设备的令人敬畏的Chrome的模拟功能），每次设计开始打破你应该添加一个断点（在这个特定的宽度）。在断点内部，您将拥有不同的css规则，这些规则将使设计适用于此特定断点。

这个主题有很多教程，例如：

Logical Breakpoints For Your Responsive Design

Setting Breakpoints in Responsive Design

修改

我会在你的设计中改变另一件事 - 它在很大程度上取决于元素的相对定位。我会使用display: inline-block或float: left/right来将元素放在彼此旁边。在你所使用的地方使用了“display：inline-block”你错误地使用它（在内部div元素内）。你应该在外部div上使用它（例如“gamesbutton”元素而不是“gamesbuttonlink”）

Answer 2

您已将许多元素宽度设置为动态宽度（在css中使用类似width: 27%的内容）。请记住，无论何时调整屏幕大小，这些元素也会按比例调整大小。如果您希望元素保持相同的宽度而不管屏幕的大小，请使用width:100px作为固定宽度。 height也是如此。

如果您想要响应式设计，则应使用@media查询设置样式。见some common media queries for different devices。只要满足查询条件，就会应用这些样式。

当我将浏览器切换到全屏时，设计会发生变化

2 个答案: