如何使用 HTML/CSS 中的 % 位置方法更精确地调整显示器分辨率？

Question

在我的程序中，我需要将一个按钮的图像准确地放在另一个图像的顶部，该按钮应该位于该位置。为了能够在不同的显示器分辨率下使用它，我使用 % 定位图像。我还将 body（或 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>

Answer 1

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

这个其实还得去media query。

更多详情可以关注link

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

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

Answer 2

希望这就是您所期待的。

.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/CSS 中的 % 位置方法更精确地调整显示器分辨率？

How to use position method in % in HTML/CSS to adjust to monitor resolution with more precision?

html

css

position

screen

resolution