屏幕最小化时标题照片（导航栏上方）消失答案

【问题标题】：Header photo (above navbar) disappears when screen is minimized屏幕最小化时标题照片（导航栏上方）消失
【发布时间】：2017-02-23 20:16:42
【问题描述】：

在正常窗口大小下，我的网站包含标题照片，照片上写有欢迎和旅行建议，标题底部是导航栏。我希望它在手机视图中看起来一样，但是每次我最小化屏幕并且导航栏在页面顶部移动，然后是其余的正文内容时，文字和标题照片都会消失。其他一切都很好。我只是想找到一种方法将标题照片保留在移动视图中，并保留其下方的导航栏。谢谢！

我的 HTML 代码是：

<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>
             ...

【问题讨论】：

标签： html css mobile header navbar

【解决方案1】：

尝试使用 flex-box 或 css 网格，这很简单，下面有一个演示链接，我为您制作了一个可缩放的响应式标题和导航栏，希望这可以帮助您度过美好的一天。

有演示：

Scaled header and nav-bar

当然也不要忘记在您的<head> 中添加此代码：

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

【讨论】：

非常感谢！有效。问题是我在标题标签中没有照片类。

【解决方案2】：

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

尝试将此添加到文档的顶部。它现在应该缩放图像。您现在不应该需要 css 中的 @mediascreen 代码。

【讨论】：

谢谢！我会将它添加到 html 中。

【解决方案3】：

从外观上看，您的形象不应该消失。但是您正在做的一些事情可能会导致标题照片看起来无法正常显示。

我会说你应该从媒体查询开始调试。也许尝试将display:block; 添加到您的.brand 类中，并可能给它一个设定的高度。我认为这可能会解决您的一些问题。

还可以尝试将视口元数据添加到您的 html 头部，如下所示：

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

这将告诉浏览器如何控制页面的尺寸和缩放。

另外，min-height: -10% 你的.address-bar 类是没用的，它不会做任何事情。 div 的大小不能小于0。

但是，如果您说它可以全屏显示，请尝试删除整个媒体查询，看看您是否仍然得到不想要的结果。如果没有，这里有你的起点。

【讨论】：

谢谢！我整理了一下。你是对的，不需要 min-height: -10%。