Javascript Divs赢得'；不要停留在使用媒体查询

我有一个游戏控制器，我最终会用精灵来按下按钮等等。目前，我内联的照片使用图像标签

然后我做了三个空div，给它们一个50px50px的大小，并将它们放置在两个按钮和开始按钮上

使用Javascript，我让Diva有一个eventlistener来播放声音/启动网页

我现在的问题是响应性，我使用了display flex的网页，但我相信，因为我使用了position absolute，它不会响应

我一直在尝试使用媒体查询来保持div覆盖屏幕尺寸上的按钮，但我仍然有这个问题

完成我正在做的事情的正确/更好的方法是什么？或者为什么我的媒体查询无法调整页面大小

小提琴

@仅媒体屏幕和（最小宽度：700px）{
阿布顿先生{
显示：内联块；
位置：绝对位置；
宽度：50px；
高度：50px；
利润率最高：21%；
左边缘：25%；
}
B.布顿先生{
显示：内联块；
位置：绝对位置；
宽度：50px；
高度：50px；
利润率最高：21%；
左边缘：14%；
}
.开始{
显示：内联块；
位置：绝对位置；
宽度：50px；
高度：40px；
利润率最高：22%；
右：0%；
}
}
/*屏幕大小差异*/
阿布顿先生{
显示：内联块；
位置：绝对位置；
宽度：50px；
高度：50px；
利润率最高：10%；
左缘：12%；
}
B.布顿先生{
显示：内联块；
位置：绝对位置；
宽度：50px；
高度：50px；
利润率最高：10%；
左缘：7%；
}
.开始{
显示：内联块；
位置：绝对位置；
宽度：50px；
高度：40px；
利润率最高：11%；
右：0%；
}

---

它应该可以工作，请尝试以下操作：

文件
A.
B

您不需要媒体查询。 只需将图像和按钮放在同一个容器中，将图像拉伸到容器中，然后使用“绝对位置”和“相对上/左”将按钮放在它们的坐标上

#NES{
显示器：flex；
位置：相对位置；
}
img{
宽度：100%
}
.btn{
背景：蓝色；
位置：绝对位置；
}
.aButton，.Bbutton{
身高：6%；
宽度：4.3%；
}
阿布顿先生{
左：78%；
最高：56.7%；
}
B.布顿先生{
左：67.3%；
最高：56.5%；
}
.开始{
身高：2.75%；
宽度：6%；
左：40%；
最高：60%；
}

首先，您需要将媒体查询放在代码末尾。因为如果选择器是相同的，它只接受文件中的最后一条规则。一个好的答案应该不仅仅是“这应该有效”。你应该解释原始代码的错误，并扩展代码如何解决问题。

<meta content="width=device-width, initial-scale=1name="viewport"/>
<div class="aButton"></div>
<div class="Bbutton"></div>
<div class="Start"></div>

<div id="NES"><img src="images/controllerNES.png" alt="NES- 
Controller"></div>


CSS:
@media only screen and (min-width: 700px) {
.aButton {
display: inline-block;
position: absolute;
width: 50px;
height: 50px;
margin-top: 21%;
margin-left: 25%;
}
.Bbutton{
display: inline-block;
position: absolute;
width: 50px;
height: 50px;
margin-top: 21%;
margin-left: 14%;
 }

 .Start{
display: inline-block;
position: absolute;
width: 50px;
height: 40px;
margin-top: 22%;
padding-right: 0%;
 }
}

 .aButton{

 display: inline-block;
 position: absolute;
 width: 50px;
 height: 50px;
 margin-top: 10%;
 margin-left: 12%;

 }


 .Bbutton{

display: inline-block;
position: absolute;
width: 50px;
height: 50px;
margin-top: 10%;
margin-left: 7%;

 }

.Start{

display: inline-block;
position: absolute;
width: 50px;
height: 40px;
margin-top: 11%;
padding-right: 0%;

 }