如何在HTML / CSS中使用％中的位置方法来调整以更精确地监视分辨率？

问题描述

在我的程序中，我需要将一个按钮的图像放置在另一个图像的正上方，该按钮应该位于该位置。为了能够以不同的显示器分辨率使用它，我使用％定位图像。我还将主体（或div）的高度和宽度设置为100vw和100vh（我也尝试过screen.height和window.height）。但是，当我更改显示器的分辨率时，图像将调整为新的分辨率，但是现在高度（高度很好）就足够了。以较低的分辨率显示较高的按钮。为什么不起作用？

.alarm img {
  position: fixed;
  width: 4.5%;
  left: 41.7%;
  top: 71%;
}

.faceplate img {
  position: fixed;
  width: 17%;
  left: 40%;
  top: 40%;
  margin-left: 0px;
  margin-top: 0px;
}

<html>

<body style="width:100vw; height:100vh; margin:0;padding:0">
  <div_logo class="faceplate"><img src="pictures/asel3_faceplate.png">

    <div_alarm class="alarm"><img src="pictures/asel3_alarm.png"></div_alarm>

  </div_logo>
</body>

</html>

解决方法

您应该使用媒体查询针对不同的屏幕尺寸解决此问题。您必须为不同类型的屏幕尺寸创建不同类型的CSS。

事实上，您必须进行媒体查询。

有关更多详细信息，您可以点击链接

https://www.w3schools.com/HOWTO/howto_css_media_query_breakpoints.asp

在媒体中，查询为不同的屏幕尺寸定义CSS样式。

我希望这就是您的期望。

.faceplate {
  top:25%;  /* just change this */
  left:25%; /* just change this */
  position: absolute;
}

body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  position: relative;
  padding: 0;
}

.faceplate {
  top: 25%;
  left: 25%;
  position: absolute;
}

.faceplate > img {
  width: 90%;
  height:90%;
}

.faceplate .alarm {
  position: absolute;
  top: 0;
}

.faceplate .alarm > img {
  width: 70%;
  height: 70%;
}

<html>

<body>
  <div class="faceplate"><img src="https://dummyimage.com/100x100/e055e0/fff">

    <div class="alarm"><img src="https://dummyimage.com/80x80/000/fff"></div>

  </div>
</body>

</html>

html position resolution screen

如何在HTML / CSS中使用％中的位置方法来调整以更精确地监视分辨率？

问题描述

解决方法

相关问答