我使用低于 989 像素(最大图像尺寸)的媒体查询为我的背景图像创建了一个断点。我不用来显示图像,因为我想为不同的设备使用不同的图像(这样移动设备当然不会下载最大的图像)。(每个图像都在特定的断点中定义)。早点说吧,这是现场直播http://www.glorkianwarrior.com
这个css是这样的:
.splash {
max-width: 988px;
margin:auto;
height:380px;
}
@media (min-width: 989px) {
.splash {
background: url('../images/academy.png') no-repeat;
}
}
@media (max-width: 989px) and (min-width: 321px) {
.splash {
background: url('../images/academy-mid.png') no-repeat;
max-width: 640px;
padding: 4px;
position: relative;
background-size: 100%;
}
}
这使得一旦页面达到 988 像素或以下(低至 321 像素),启动图像就会变得流畅。在浏览器宽度小于 640 像素之前,它实际上不会改变它的宽度/高度。在其下方嵌套在 .splash 下的导航栏中发生的事情不会改变其位置。这是因为它与.splash 的高度相关。html 看起来像这样:
<header class="splashhead">
<div class="splash">
<nav class="kochalka">
<ul>
<li class="navclass first active"><a href="http://glorkianwarrior.com/" title="Home" >Home</a></li>
<li class="navclass"><a href="news/" title="News" >News</a></li>
<li class="navclass"><a href="gallery.html" title="Gallery" >Gallery</a></li>
<li class="navclass last"><a href="guide.html" title="Guide" >Guide</a></li>
</ul>
</nav>
</div>
</header>
如果我不给它那个高度,它就会消失。我试过给它 100% 或页面本身的百分比。我尝试给它的父母一个特定的高度,然后在 .splash 上做 100%,但这并没有改变导航栏的位置。
是否可以让此导航根据浏览器大小更改其大小?我是否必须想办法在页面上使用每个图像在自己的 div 中的图像,并使用媒体查询在不相关的 div 上显示:none?