Before Resize
After Resize
您好，我正在试图找到一个解决方案，以解决我的按钮移动的地方时，我的窗口大小调整时，最好是只使用超文本标记语言和CSS. 我是否必须针对每种大小应用媒体查询才能保持不变，或者是否有更直接的解决方案？
以下是我的代码，请帮忙，谢谢！
100
<body>
<header>
<h1>Nazareth</h1>
<div class="headerButtons">
<p>About me</p>
<p>My Projects</p>
<p>Contact Me</p>
</div>
</header>
<div id="tv">
<img src="stuff/pngwing.com.png" alt="">
<div id="tvButtons">
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
</div>
</div>
</body>
100
body{
margin: 0;
padding: 0;
background-color: var(--white-color);
}
/*=============NAVBAR=====================*/
header > h1 {
padding: 0;
margin: 0 0 0 2rem;
color: var(--blue-color);
font-size: 3rem;
}
header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
background-color: var(--brown-color);
font-family: 'Yanone Kaffeesatz', sans-serif;
letter-spacing: 0.1rem;
}
.headerButtons {
display: flex;
margin-right: 2rem;
}
header p {
margin-right: 2rem;
font-size: 1.5rem;
background-color: var(--white-color);
padding: 0.5rem;
border: 2px solid #847728;
}
header p:hover {
background-color: var(--orange-color);
border: none;
border-radius: 5px;
}
/*=================END OF NAVBAR=====================*/
#tv {
display: flex;
position: relative;
justify-content: center;
margin-top: 1rem;
width: 100%;
}
#tvButtons {
display: flex;
flex-direction: column;
position: absolute;
right: 469px;
top: 235px;
}
#tvButtons button{
margin-top: 15px;
background-color: var(--white-color);
height: 15px;
width: 15px;
border-radius: 50%;
}
#tvButtons button:active{
background-color: #ffe95b;
}