我如何使我的导航栏仅使用HTML/CSS调整大小?

Question

我正在尝试制作一个水平导航栏，它在浏览器中有一些菜单项，但如果在移动设备或其他较小的设备上使用，则浓缩为汉堡包菜单。我一直有很多麻烦，实际上删除菜单项，并将它们添加到汉堡菜单。如有任何帮助，我将不胜感激。

示例HTML:

<div class="navbar">
<a href="#First Name">First Name</a>
<a href="#Projects">Projects</a>
<a href="#Resume">Resume</a>
<a href="#About">About</a>
</div>

示例CSS:

.navbar {
overflow: hidden;
background-color: #ECECEC;
width:100vw;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
border-bottom: 1px solid black;
}
/* Links inside the navbar */
.navbar a {
float: left;
display: flex;
color: #474243;
text-align: center;
padding: 30px 16px;
text-decoration: none;
font-size: 150%;
font-family: 'Roboto', sans-serif;

}
.navbar a:nth-of-type(1) {
/*  padding-right: 680px; */
color: black;
margin-right: 680px;
padding-left: 50px;
/*background: #777; */
font-size: 200%;
font-family: 'Roboto', sans-serif;
}

/* Change background on mouse-over */
.navbar a:hover {
background: #ddd;
color: black;
}



@media (max-width: 952px){
navbar a{
font-size: 16px;
}
}   

Answer 1

您可以使用@media查询。这里有一些例子和指导方针https://www.w3schools.com/cssref/css3_pr_mediaquery.asp