Html 屏幕最小化时，标题照片（导航栏上方）消失
在正常窗口大小下，我的网站包含标题照片，上面写着欢迎和旅行建议，标题底部是导航栏。我希望它在手机视图中看起来是一样的，但是每次我最小化屏幕时，文字和标题照片就会消失，导航栏会在页面顶部移动，然后是正文的其余部分。其他一切都很好。我只是想找到一种方法，使标题照片保持在移动视图中，导航栏位于其下方。谢谢 我的HTML代码是：Html 屏幕最小化时，标题照片（导航栏上方）消失,html,css,mobile,header,navbar,Html,Css,Mobile,Header,Navbar,在正常窗口大小下，我的网站包含标题照片，上面写着欢迎和旅行建议，标题底部是导航栏。我希望它在手机视图中看起来是一样的，但是每次我最小化屏幕时，文字和标题照片就会消失，导航栏会在页面顶部移动，然后是正文的其余部分。其他一切都很好。我只是想找到一种方法，使标题照片保持在移动视图中，导航栏位于其下方。谢谢 我的HTML代码是： <style> .brand, .address-bar { text-align: center; backgro
<style>
.brand,
.address-bar {
text-align: center;
background: url("img/photo.jpg") no-repeat center center fixed;
background-size: cover;
position: relative;
top: -10%;
left: -10%;
right: -10%;
min-width: 110%;
min-height: -10%;
padding: 100px;
font-size: 50px;
color: black;
margin-top:-1%;
}
......
@media screen and (min-width:768px) {
.brand {
display: inherit;
margin: 0;
text-align: right;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
font-family: "Josefin Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 5em;
font-weight: 700;
line-height: normal;
color: #fff;
}
.address-bar {
display: inherit;
margin: 0;
padding: 0 150px 400px;
text-align: right;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
text-transform: uppercase;
font-size: 1.25em;
font-weight: 400;
letter-spacing: 3px;
color: #fff;
}
......
</style>
.....
<body>
<div class="brand"> Welcome </div>
<div class="address-bar"> Travel recommendations </div>
<!-- Navigation -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
...
.品牌，
.地址栏{
文本对齐：居中；
背景：url（“img/photo.jpg”）没有固定的重复中心；
背景尺寸：封面；
位置：相对位置；
前-10%；
左-10%；
右图：-10%；
最小宽度：110%；
最小高度：-10%；
填充：100px；
字体大小：50px；
颜色：黑色；
利润上限：-1%；
}
......
@媒体屏幕和屏幕（最小宽度：768px）{
.品牌{
显示：继承；
保证金：0；
文本对齐：右对齐；
文本阴影：1px 1px 2px rgba（0,0,0.5）；
字体系列：“Josefin Slab”，“Helvetica Neue”，Helvetica，Arial，无衬线；
字号：5em；
字号：700；
线高：正常；
颜色：#fff；
}
.地址栏{
显示：继承；
保证金：0；
填充：0 150px 400px；
文本对齐：右对齐；
文本阴影：1px 1px 2px rgba（0,0,0.5）；
文本转换：大写；
字号：1.25em；
字体大小：400；
字母间距：3px；
颜色：#fff；
}
......
.....
欢迎
旅行建议
切换导航
...
尝试将其添加到文档顶部。它现在可以缩放图像。您现在不应该在css中使用@mediascreen代码。从外观上看，您的图像不应该消失。但是，您正在执行的某些操作可能会导致标题照片显示不正确 我想你应该在媒体查询时开始调试。也许可以尝试将
display:block；.brand<meta name="viewport" content="width=device-width, initial-scale=1.0">
类上的最小高度：-10%
地址栏是无用的，这不会起任何作用。div的大小不能小于0
但是如果你说它可以全屏运行，试着删除整个媒体查询，看看你是否仍然得到了不想要的结果。如果没有，那你就可以开始了。从外观上看，你的图像不应该消失。但是你正在做的一些事情可能会导致标题照片看起来没有显示恰当地
我想你应该在媒体查询时开始调试。也许可以尝试将display:block；
添加到你的.brand
类中，并给它设定一个高度。我想这可能会解决你的一些问题
还可以尝试向html头部添加视口元，如下所示：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这将告诉浏览器如何控制页面的尺寸和缩放
另外，您的类上的最小高度：-10%
地址栏是无用的，这不会起任何作用。div的大小不能小于0
但是如果你说它可以全屏运行，试着删除整个媒体查询，看看你是否仍然得到了不想要的结果。如果没有，那就从这里开始。尝试使用flex box或css网格很简单，下面有一个链接，我为你制作了一个演示，以获得一个缩放且响应迅速的标题和导航栏，希望这个hel祝你今天愉快
有演示：
当然，不要忘记将以下代码添加到您的
中：
<meta name="viewport" content="width=device-width, initial-scale=1">
尝试使用flex box或css网格很简单，下面有一个指向演示的链接，我为您制作了一个缩放且响应迅速的标题和导航栏，希望这能帮助您度过愉快的一天
有演示：
当然，不要忘记将以下代码添加到您的
中：
<meta name="viewport" content="width=device-width, initial-scale=1">
非常感谢！它成功了。问题是我没有在标题标签中包含photo类。非常感谢！它成功了。问题是我没有在标题标签中包含photo类。谢谢！我已经整理好了。你是对的，不需要最小高度：-10%。谢谢！我整理好了。你说得对，there不需要最小高度：-10%。谢谢！我将把它添加到html中。谢谢！我将把它添加到html中。