我目前无法弄清楚为什么我的网页没有随窗口调整大小。如果我缩小窗口，按钮会转到底部，与主标题相同，并且它们都在空白区域。我已经尝试了很多建议，例如在涉及字体和宽度时仅使用百分比等等，但即使那样似乎也行不通。在代码中， Bootstrap 似乎没有实现，但我通过 codepen 实现了它。 这是我的代码:
HTML
<a name = "home"></a>
<div id = "wrapper">
<!--linker to allow us to jump to
top of page -->
<ul>
<!--setting up linker for home
-->
<li><a style = "color:white" href = "#contact">Contact</a></li>
<li><a style = "color:white" href = "#about">About</a></li>
<li><a style = "color:white" href = "#home">Home</a></li>
</ul>
<div>
<img class ="make-ImageSmaller"src = "https://images.unsplash.com/photo-1469521669194-babb45599def?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=e32c5d5b5ea606e27bf29c40b4b3bb4f">
<h2 class = "threeDLettering backGroundEditor">Front-End Developer</h2>
<button id = "twitterButton" class = "clearButton btn btn-default spinner"><a target = "blank" style = "color:white" href = "" >Twitter</a></button>
<button id = "instagramButton" class = "clearButton btn btn-default spinner"><a target = "blank" style = "color:white" href = "" >Instagram</a></button>
<button id = "facebookButton" class = "clearButton btn btn-default spinner"><a target = "blank" style = "color:white" href = "" >Facebook</a></button>
</div>
</div>
CSS
.home-Background-Image{
position:relative;
}
.backGroundEditor{
position: absolute;
text-align:center;
top: 30%;
font-size:50px;
left: 0;
width: 100%;
font-family: Monospace;
}
#twitterButton{
top:70%;
right:59%;
}
#instagramButton{
top:70%;
right:43%;
}
#facebookButton{
top:70%;
right:27%;
}
.clearButton {
position:absolute;
background-color: transparent;
font-size: 25px;
width: 15%;
box-shadow: none;
}
.threeDLettering{
color:#FFFFFF;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
.make-ImageSmaller{
width:100%;
}
ul {
/*makes it so text can't go through nav bar*/
z-index:500;
/*Takes away the bullet points*/
list-style-type: none;
margin: 0;
/*separation between the group, outside border*/
padding: 0;
/*Matte Black*/
background-color: #333;
/*Keeps bar in same place when scrolling*/
position:fixed;
/*What allows the bar to be able to stay stretch on the screen*/
width: 100%;
}
li {
float: right;
}
body{
margin: 0;
}
#wrapper {
margin-left:auto;
margin-right:auto;
width:100%;
}
li a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* WebKit and Opera browsers */
@-webkit-keyframes spinner {
from { -webkit-transform: rotateY(0deg); }
to { -webkit-transform: rotateY(-360deg); }
}
/* all other browsers */
@keyframes spinner {
from {
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-moz-transform: rotateY(-360deg);
-ms-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
}
.spinner {
-webkit-animation-name: spinner;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 10s;
animation-name: spinner;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 10s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.spinner:hover {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
阅读其他帖子有人说要将包装器类添加到我添加的 div，但即使那样也无法使其工作。您可能会看到任何建议或设计缺陷，我愿意改变。谢谢。
最佳答案
我在 codepen 中做了这个。首先，我将您的整个 HTML 代码嵌套在“body”标签容器中，并删除了您的“img”标签
HTML
<body>
<a name = "home"></a>
<div id = "wrapper">
<!--linker to allow us to jump to
top of page -->
<ul>
<!--setting up linker for home
-->
<li><a style = "color:white" href = "#contact">Contact</a></li>
<li><a style = "color:white" href = "#about">About</a></li>
<li><a style = "color:white" href = "#home">Home</a></li>
</ul>
<div>
<h2 class = "threeDLettering backGroundEditor">Front-End Developer</h2>
<button id = "twitterButton" class = "clearButton btn btn-default spinner"><a target = "blank" style = "color:white" href = "" >Twitter</a></button>
<button id = "instagramButton" class = "clearButton btn btn-default spinner"><a target = "blank" style = "color:white" href = "" >Instagram</a></button>
<button id = "facebookButton" class = "clearButton btn btn-default spinner"><a target = "blank" style = "color:white" href = "" >Facebook</a></button>
</div>
</div>
</body>
然后我将它添加到您的 CSS 中，而不是在此处实现您的图像。
body
{
background: url("https://images.unsplash.com/photo-1469521669194-babb45599def?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=e32c5d5b5ea606e27bf29c40b4b3bb4f") no-repeat center fixed;
background-size:cover;
}
不确定这是否是应该实现的正确方法，但这通常对我有用。
关于javascript - 网页不会随着窗口大小的调整而调整，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40477572/