时间戳

首页 > 解决方案 > 如何在 HTML/CSS 中使用 % 中的位置方法来更精确地调整显示器分辨率？

html - 如何在 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>

在此处输入图像描述

标签： htmlcsspositionscreenresolution

解决方案

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

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

更多详情，您可以点击链接

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

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

推荐阅读