Header 屏幕最小化时照片（导航栏上方）消失

Question

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

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

Answer 1

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

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

Answer 2

看样子，你的形象应该不会消失。但是您正在做的一些事情可能会导致 header 照片显示不正确。

我会说你应该在 media-query 开始调试。也许尝试将 display:block; 添加到您的 .brand class 并给它一个设定的高度。我认为这可能会解决您的一些问题。

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

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

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

此外，您 .address-bar class 上的 min-height: -10% 是无用的，它不会做任何事情。 div 的尺寸不能小于 0.

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

Answer 3

尝试使用 flex-box 或 css 网格很简单，下面有一个 link 演示，我为您制作了一个缩放和响应 header和导航栏希望这能帮助你度过愉快的一天。

有演示:

Scaled header and nav-bar

当然不要忘记将此代码添加到您的<head>：

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

Header 屏幕最小化时照片（导航栏上方）消失

Header photo (above navbar) disappears when screen is minimized

html

css

mobile

header

navbar