javascript - Div 不会继续使用媒体查询

Question

我有一个游戏 Controller ，我最终将使用 sprite 来进行按钮按下等操作。目前，我使用图像标签内嵌了照片。

然后我制作了三个空的 div 并将它们的大小设置为 50pxx50px 并将它们绝对定位在两个按钮和开始按钮上。

我使用 Javascript 使 div 具有事件监听器来播放声音/启动网页。

我的问题现在变成响应式了 我为网页使用了 display flex，但我相信因为我使用了绝对位置，所以它不会响应。

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

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

fiddle https://jsfiddle.net/L14xsg7k/

<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%;

 }

@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%;
  }
}


/*Screen Size Differences */

.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%;
}

<div class="aButton"></div>
<div class="Bbutton"></div>
<div class="Start"></div>

<div id="NES"><img src="https://ih1.redbubble.net/image.278053540.7309/ap,550x550,16x12,1,transparent,t.png" alt="NES-Controller"></div>

Answer 1

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

#NES {
  display: flex;
  position: relative;
}

img {
  width: 100%
}

.btn {
  background: blue;
  position: absolute;
}

.aButton, .Bbutton {
    height: 6%;
    width: 4.3%;
}

.aButton {
    left: 78%;
    top: 56.7%;
}
.Bbutton {
    left: 67.3%;
    top: 56.5%;
}

.Start {
  height: 2.75%;
  width: 6%;
  left: 40%;
  top: 60%;
}

<div id="NES">
    <img src="https://ih1.redbubble.net/image.278053540.7309/ap,550x550,16x12,1,transparent,t.png" alt="NES-Controller">
    <div class="btn aButton"></div>
    <div class="btn Bbutton"></div>
    <div class="btn Start"></div>
</div>