我正在为一家美化公司建立一个网站，当我在标准框架的窗口看起来一切都很好，我有大小设置为导航栏时调整窗口大小.我网站上的图片中的文字与我导航栏上的文字重叠，看起来很糟糕，但我似乎想不出如何让任何东西正常工作.我对网络开发比较陌生，正在努力积累更多的经验.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: "Poppins", sans-serif;
height:100vh;
}
a, a:hover{
text-decoration: none;
}
.top-bar{
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 25px;
background: #2d4053;
}
.top-bar span{
color: #fff;
}
.top-bar ul{
list-style: none;
display: flex;
}
.top-bar li{
margin: 0px 5px;
}
.top-bar a{
color: #fff;
}
.top-bar a:hover{
color: rgb(0, 174, 255);
}
nav{
background: #336600;
padding: 5px 20px;
display: flex;
align-items: center;
}
nav a{
color: #000
}
nav a:hover{
color:#2d4053
}
.logo {
flex: 1;
}
.logo a{
display: flex;
align-items: center;
font-size: 20px;
}
.logo a:hover{
color: #2d4053;
}
.logo img{
width: 40px;
margin-right: 10px;
}
.menu{
display: flex;
align-items: center;
list-style: none;
}
.menu li {
padding: 15px 10px;
font-size: 16px;
}
.toggle{
font-size: 30px;
display: none;
}
.banner-card{
height:100%;
background:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTk4oleUiWLncKk9RUvuBOY-h6AMDZdzVOMiwP-F9Rk1Q&s');
background-repeat: no-repeat;
background-size: cover;
@media screen and (max-width: 680px){
nav{
display: block;
position: relative;
padding: 15px 20px;
}
.menu{
margin-top: 15px;
display: none;
}
.menu.active, .toggle{
display: block;
}
.toggle{
position: absolute;
top: 15px;
right: 20px;
}
.banner-card{
margin-top: 15px;
}
.banner-text{
font-size: 50%;
}
.banner-text h4{
font-size: 50%;
margin: 30px;
}
}
.banner-card{
margin: 0 auto;
position: relative;
}
.banner-card img{
max-width: 100%;
height: auto;
}
.banner-text{
padding-top: 10px;
position: absolute;
text-align: center;
top: 50%;
left: 50%;
color: #000;
transform: translate(-50%, -50%);
}
.banner-text h4{
font-size: xxx-large;
text-transform: uppercase;
font-weight: bold;
margin-top: 10px;
margin-bottom: 5px;
color: #fff;
}
.banner-text p{
font-size: large;
font-weight: bold;
margin-bottom: 5px;
color: #fff;
}<!DOCTYPE html>
<html>
<head>
<title>Home Page for Landscapes</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
</head>
<body>
<div class="top-bar">
<span><a href="tel:555555555"><ion-icon name="call-outline"></ion-icon> (555) 555-5555</a></span>
<ul>
<li><a href="#"><ion-icon name="logo-facebook"></ion-icon></a></li>
<li><a href="#"><ion-icon name="logo-twitter"></ion-icon></a></li>
<li><a href="#"><ion-icon name="logo-instagram"></ion-icon></a></li>
</ul>
</div>
<nav>
<div class="logo">
<a href="#"><img src="logo.png" alt="logo">Landscapes</a>
</div>
<div class="toggle">
<a href="#"><ion-icon name="menu-outline"></ion-icon></a>
</div>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Solutions</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</nav>
<div class="banner-card">
<img src="background.jpg">
<div class="banner-text">
<h4>We don't beat around the bush.</h4>
<p>Landscapes has all the professional skills required to make your ideas come to life. With over 10 plus years of experience there is nothing our experts can't handle.</p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(function(){
$(".toggle").on("click", function(){
if($(".menu").hasClass("active")){
$(".menu").removeClass("active");
$(this).find("a").html("<ion-icon name='menu-outline'></ion-icon>");
} else{
$(".menu").addClass("active");
$(this).find("a").html("<ion-icon name='close-outline'></ion-icon>");
}
});
});
</script>
</body>
</html>我正在try 让文本与窗口适当调整大小，以便无论用户使用什么设备，查看体验都是相同的.