如何使用 window 调整 NavBar 的大小

Question

我正在尝试在调整 window 大小时调整我网站的导航栏大小。我当前的代码工作正常，直到 window 宽度太小并且导航栏变成两行并且看起来很糟糕。这是我网站主要部分的代码。

我想要它做的是当宽度对于所有内容来说都太小时（这主要是针对移动用户）从水平导航栏切换到垂直导航栏，我不知道该怎么做。

我也想使导航栏变粘，并尝试了一些教程，但似乎无法在该网站上正常工作。

<!DOCTYPE html>
<html>
<link href="https://fonts.googleapis.com/css2?family=Flamenco:wght@300&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
<title>
    Web_Title
</title>
<head>
<body>
<header>
    <div class="container">
        <img src="src" alt = "logo" class = "logo" width="150" height="50">
    </div>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Video Archive</a></li>
            <li><a href="#">Text Archive</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </nav>
</header>
</body>
</head>
</html>

我的 css 代码如下：

body {

    margin: 0;
    background: #222;
    font-family: 'Flamenco', cursive;
    font-weight: 900;

}


header {
    background: #ffffff
}


header::after{
    content:'';
    display:table;
    clear: both;
}

.logo{
    float:left;
    padding: 0px 0;
}

nav{
    float: left;
}

nav ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li {
    display: inline-block;
    margin-left: 70px;
    padding-top: 15px;

    position: relative;
}

nav a {
    color: #444;
    text-decoration: none;
    font-size: 18px;

}
nav a:hover{
    color: rgb(20, 20, 38);
}

nav a::before{
    content: '';
    display: block;
    height: 5px;
    background-color: #444;

    position: absolute;
    top:0;
    width: 0%;

    transition: all ease-in-out 250ms;
}



nav a:hover::before{
    width: 100%;

}

Answer 1

我建议查看媒体查询。

W3School tutorial for Media Queries

使用@media，您可以在屏幕尺寸发生变化时更改样式。这些称为断点。例如，您可以说 max-width，当屏幕宽度小于给定数量时适用，min-width，当屏幕尺寸大于给定数量时适用。

例如，当屏幕尺寸改变时，我们正在改变body的背景颜色：

/* This applies when screen size is more than 600px */
@media screen and (min-width: 600px) {
  body {
    background-color: red;
  }
}


/* This only applies when screen size is less than 600px */
@media screen and (max-width: 600px) {
  body {
    background-color: yellow;
  }
}


/* This only applies when screen size is less than 400px */
@media screen and (max-width: 400px) {
  body {
    background-color: green;
  }
}

<h1>Change the size of the screen to see the effect</h1>

如果您需要帮助将它应用到您的代码中，我很乐意提供帮助，但请先尝试一下 =)

Answer 2

您可以在 CSS 中使用@media 来执行此操作

body {

    margin: 0;
    background: #222;
    font-family: 'Flamenco', cursive;
    font-weight: 900;

}


header {
    background: #ffffff
}


header::after{
    content:'';
    display:table;
    clear: both;
}

.logo{
    float:left;
    padding: 0px 0;
    width: 180px;
}

nav ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li {
    display: inline-block;
    margin-left: 70px;
    padding-top: 15px;

    position: relative;
}

nav a {
    color: #444;
    text-decoration: none;
    font-size: 18px;

}
nav a:hover{
    color: rgb(20, 20, 38);
}

nav a::before{
    content: '';
    display: block;
    height: 5px;
    background-color: #444;

    position: absolute;
    top:0;
    width: 0%;

    transition: all ease-in-out 250ms;
}



nav a:hover::before{
    width: 100%;
}



nav{
    float: left;
}

@media only screen and (max-width: 400px) { /* smaller screen*/
  .logo {
    width: 100%;
  }
}

<!DOCTYPE html>
<html>
<link href="https://fonts.googleapis.com/css2?family=Flamenco:wght@300&display=swap" rel="stylesheet">
<title>
    Web_Title
</title>
<head>
<body>
<header>
    <div class="container">
        <img src="src" alt = "logo" class = "logo">
    </div>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Video Archive</a></li>
            <li><a href="#">Text Archive</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </nav>
</header>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus magna et commodo faucibus. Ut viverra efficitur orci ut efficitur. Donec porta neque ac pretium lobortis. Maecenas gravida non tellus nec maximus. Pellentesque magna urna, rhoncus in lectus id, varius aliquet sapien. Maecenas augue purus, eleifend quis sagittis in, rhoncus sit amet dolor. Etiam sed quam sit amet tortor suscipit efficitur id eu ex. Ut eu odio hendrerit, eleifend massa in, malesuada quam. Duis cursus non est quis pretium. Sed tempus arcu sit amet erat aliquet, nec tincidunt lorem feugiat. Nunc nec ipsum consequat, maximus dolor sed, tempus risus. Aenean aliquet sem quis purus euismod, at sodales velit ullamcorper.

Pellentesque accumsan suscipit sem, ac ullamcorper libero cursus pretium. Aenean semper sodales tortor a finibus. Maecenas sit amet egestas tortor. Etiam molestie imperdiet maximus. Maecenas a lacus est. Pellentesque purus orci, rutrum ut vehicula at, fringilla eget ligula. Donec sem velit, commodo eu tincidunt id, accumsan sed leo.

Quisque at risus sit amet urna efficitur bibendum. Aliquam eu sagittis erat. Fusce finibus orci at nulla rutrum, quis laoreet purus congue. Aliquam aliquam fermentum erat vitae luctus. Sed vitae lacus finibus, lacinia risus quis, molestie eros. Vestibulum ullamcorper, lacus sit amet eleifend commodo, est tellus aliquam ante, et hendrerit ante velit sed libero. Praesent aliquet nisi semper pharetra suscipit. Aliquam fermentum a turpis eu congue. Integer nec arcu sed tellus dapibus pretium. Proin posuere urna turpis, volutpat sollicitudin sem sollicitudin eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Ut pharetra molestie nisl vitae feugiat. Nulla accumsan vulputate sagittis. Sed quis erat dictum, tempor leo nec, posuere velit. Duis consectetur metus sit amet odio bibendum egestas sed id arcu. Maecenas vehicula, justo non condimentum vestibulum, elit justo pharetra sapien, nec fermentum diam lorem ac felis. Morbi ut sem leo. Nunc ac ante quam. In hac habitasse platea dictumst. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam tempus ex velit, varius fringilla nisi semper ut. Etiam sed eleifend augue, ut mattis eros. Sed sodales libero ex, et molestie velit pellentesque nec. Morbi ac ligula quis dui dapibus ornare. Duis at est non nibh scelerisque cursus vel in massa. Suspendisse pretium, mi quis cursus varius, ipsum enim suscipit nibh, non sollicitudin est odio vitae est. Quisque bibendum vehicula nibh, vel accumsan purus lacinia eu.

Duis vel feugiat dolor, non dignissim arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed venenatis eget nibh et interdum. Aliquam erat volutpat. Quisque tempus justo augue, vitae pharetra magna ultrices ut. Quisque id scelerisque felis. Pellentesque sed elementum enim. Duis elementum sem sed neque malesuada, nec consectetur nulla finibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vestibulum massa eget arcu pharetra vulputate. Sed id nisl ac turpis tempus hendrerit ut in ligula. Ut imperdiet porta mauris, vitae fringilla augue auctor vel.
</p>
</body>
</head>
</html>

@media CSS 规则仅在满足现有规则的情况下才将样式添加到页面。 @media max-width: 400px 仅在宽度小于 400px 时添加样式。

粘性定位通常会出现这样的问题，而且通常没有修复。您或许可以使用固定位置并在页面顶部添加大量填充，这样内容就不会在导航栏下丢失。

我使用 Lorem Ipsum 来模拟内容，这样您就可以玩固定位置了。

Answer 3

我注意到您使用浮动使徽标在右侧，导航在左侧，我建议您使用浮动，因为它在调整屏幕大小时更容易。

您的代码如下：

header {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

justify-content 属性将允许您指定 header 中的内容将如何分发以及 align-items: center 允许您将项目垂直居中对齐。

垂直导航栏问题

这里可以使用媒体查询来处理问题。如果您不知道媒体要求是什么，这是一种运行 css 为设备屏幕的特定宽度范围编码的方法，例如仅适用于移动设备。

要实现这一点，假设宽度范围低于 400 像素，请参见下面的示例：

@media (min-width){
   /* specify your code here */
   /* this is assuming you coded for mobile first*/ 
}

@media (max-width){
   /* specify your code here*/
   / this is assuming you coded for desktop first*/
}

如何使用 window 调整 NavBar 的大小

How to make NavBar Resize with window

html

css

navbar