Question

我试图通过导航实现类似Bootstrap的标头，但是我发现，当我缩小窗口时，标头内的内容变得混乱，并且标头也最小化，而不是保持不变。我已经在标题上使用了 vh 单位，因此它只能与任何屏幕设备的尺寸保持相同的大小，但是不起作用。我只希望内容随着缩小而变小，但不希望标题像我看到的Bootstrap主题一样，如何在不使用Bootstrap的情况下实现？这是我的代码的 SCREENSHOT IMAGE ：

这就是我想要的ACHIEVE：缩小了，但是只有内容变小了，没有标题。

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Dental Services</title>
        <meta name="project" content="Dental Services">
        <link rel="stylesheet" href="css/styles.css">
    </head>
    <body>
        <header class="master-header">
            <nav class="nav-bar">
                <div class="nav-container">
                    <div class="brand-container">
                        <span class="brand-name">Dental Services</span>
                    </div>
                    <ul class="nav-links">
                        <li><a href="javascript:void(0);">Home</a></li><li><a href="javascript:void(0);">Services</a></li><li><a href="javascript:void(0);">About</a></li><li><a href="javascript:void(0);">Sign In</a></li>
                    </ul>
                </div>

                <div class="jumbotron">
                    <h1 class="motto">We care about</br> your teeth</h1>

                    <form class="login-form">
                        <p class="form-title">Get started for free</p>
                        <input type="text" placeholder="Enter your username" />
                        <input type="text" placeholder="Enter your email" />
                        <input type="password" placeholder="Enter your password" />
                        <button class="bnt-submit">Get Started</button>
                    </form>
                </div>
            </nav>
        </header>
    </body>
</html>

CSS

body {
    margin: 0; padding: 0;
    font: 1rem Arial;
    background: #AAA;
    box-sizing: border-box;
}
input {
    position: relative;
    height: 50px; width: 100%;
    margin: 25px 0; padding: 5px 15px;
    border: 1px solid #BBB; border-radius: 3px;
    font: 1em Arial;
    color: #555;
    background: #FFF;
    transition: box-shadow 100ms linear;
    box-sizing: border-box;
    display: block;
}
button {
    position: relative;
    height: 50px; width: 100%;
    border: 0; border-radius: 4px;
    font: 1em Arial;
    color: #FFF;
    background: Mediumseagreen;
    box-sizing: border-box;
    transition: background 100ms linear;
    cursor: pointer;
}
button:hover {
    background: Seagreen;
}
input:focus {
    outline: none;
    border-color: Steelblue;
    box-shadow: 0 0 0 4px Lightsteelblue;
}
.master-header {
    position: fixed;
    height: 100%; width: 100%;
    background: url(../images/header_img.jpg) top center no-repeat;
    background-attachment: fixed;
}
.nav-bar {
    position: absolute;
    width: 100%;
    background: transparent;
    overflow: hidden;
}
.nav-container {
    position: relative;
    width: 94%;
    margin: 0 auto; padding: 0 15px;
    background: transparent;
    overflow: auto;
    box-sizing: border-box;
}
.brand-container {
    float: left;
    padding: 20px 0;
}
.brand-name {
    position: relative;
    color: #DDD;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.nav-links {
    margin: 0; padding: 0;
    float: right;
    list-style-type: none;
    box-sizing: border-box;
}
.nav-links li {
    font: 1em Arial;
    padding: 20px 15px;
    display: inline-block;
    box-sizing: border-box;
}
.nav-links li a {
    color: #DDD;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 100ms linear;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.nav-links li a:hover {
    color: #AAA;
}
.jumbotron {
    position: relative;
    padding: 40px 60px;
    box-sizing: border-box;
    overflow: hidden;
}
.motto {
    font: 5em Arial;
    color: #FFF;
    text-align: left;
    text-shadow: 1px 1px #333;
    display: inline-block;
    float: left;
}
.login-form {
    position: relative;
    width: 40%;
    padding: 20px 50px;
    background: #FFF;
    box-sizing: border-box;
    display: inline-block;
    float: right;
}
.form-title {
    position: relative;
    margin: 20px 0 30px 0;
    font: 1.5em Arial;
    color: #666;
    text-align: left;
}

Answer 1

没关系。我使用一个CSS属性对其进行了修复： background-size：cover; 我以为标头本身会随着缩小而变得越来越小。但是我发现只有背景图片变小了，当我尝试 background-size：cover; 。

时，我自己修复了它。

如何避免标头甚至其他容器在放大/缩小时弄乱？

1 个答案: