Question

我有一个游戏控制器，最终我将使用sprites进行按钮按下操作等等。目前，我使用图片标签对照片进行了内联。

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

使用JavaScript，我使div有了一个事件监听器来播放声音/启动网页。

我的问题现在变得敏感，我在网页上使用了display flex，但是我相信由于我使用的是绝对位置，因此不会响应。

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

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

<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

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

#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>

Answer 2

应该可以，请尝试以下方法：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width= device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
<div style="position: relative; display: inline-block;">
	<img src="https://ih1.redbubble.net/image.278053540.7309/ap,550x550,16x12,1,transparent,t.png" alt="">
	<div style="position: absolute; right:19%; top: 57%">A</div>
	<div style="position: absolute; right: 30%; top: 57%">B</div>
</div>
</body>
</html>

Divs将不会继续使用媒体查询

2 个答案: