html - 即使只是调整大小，也可以在不同视口(viewport)上设置样式元素？

Question

诚然，我不是 CSS 的粉丝，我讨厌响应更快的布局，但我正在使用 Bootstrap(版本 4，重要的是)创建一个 UI，其中我有一些绝对定位的元素并不完全完美按照我的意愿对齐，无论是在不同的原始分辨率(显示器或 VGA 定义)还是简单地调整 viewport 大小时(即 Ctrl++ ).

自从我开始创建这个 UI 以来，我一直在使用 vh和 vw大多数元素的单元(当然除了那些与 Bootstrap Grid 相关的元素)认为我不会有这样的问题并且这个决定在大多数情况下都非常有效。

但是，直到现在，我一直在使用一台非常小的旧显示器 (1366x768)，最近我(终于)获得了一台 21.5"显示器(全高清，如果这很重要的话)以及我在 CSS 规则中定义的这些值，经过详尽的测试后，现在稍微错位了，有点偏左或偏上。例如:

这是我在应用程序中用于唯一用户标识的 UUID，其位置和文本大小是根据以下规则定义的:

#user-identification {
    bottom: 2.05vh;
    font-size: 0.64vw;
    height: 4vh;
    left: 3.05vw;
    width: 15vw;
}

您可能已经注意到，蓝色背景实际上是一张图片，文本绝对位于其上方，因此我可以将其重复用于不同的用例。

这些规则是在小显示器中开发时创建的，足以将文本置于背景图片的中心。但是现在，在我截取的更大的显示器中，您可以看到文本向左对齐。可能很难注意到，我知道，但这是大图的一部分，不幸的是，我无法展示更多 :(

好吧，我正要开始解决所有基于大屏幕的问题，例如，通过更改 left至 3.4vw相反，但后来我意识到，如果出于任何原因访问该网站的人处于与我之前相同的情况下，用户体验就会受到影响。

我想到的第一个解决方案是使用媒体查询，但我不知道应该使用哪些值来创建规则。

更糟!关于 viewport 调整大小，Firefox 以 10% 的幅度调整 10%，而 Chrome 的范围更广(25%、33%、50% 67%...)，其他浏览器可能有其他值。而且因为我不是专家，所以我不知道我要寻找哪些值来创建规则。

谁能帮帮我？

Although it would be awesome, it's not my intention to fit the whole UI in the viewport of, for example, an iPhone 5 (the smallest I've found on Chrome Developer Tool with 568x320). I just don't want these small icons and texts absolutely positioned to be out of place.

[编辑]

事实证明，在 Fiddle 中描述场景比我想象的要难，这就是我试图避免它的原因。但正如所问，in this one我已尽我所能定位，它在默认预览区域中看起来不错。但仅仅通过调整它的大小，文本就已经偏离了定位。

所以我制作了this one ，专门针对嵌入式版本。我相信这会更好，因为它接近于在一个窗口中使用编辑器而在另一个(浏览器)中进行预览。

然而，它们都没有真正反射(reflect)出我真正拥有的东西。虽然标记是兼容的，但<img>和 <span>在<figure>里面，在调整视口(viewport)大小时，我没有这些剧烈的变化。我在 bottom 上只有很小的错误定位和 left .

我可能没有提取我应该提取的所有内容。我已经获得了此图像(或它的更大、完整版本)所在的大部分网格。 .box不相关，因为它只是几行线性和径向渐变和一些 box-shadow .

整个 UI 很复杂，我可能从这些 Fiddles 中遗漏了一些东西，但至少是在调整大小时(当然在不同的分辨率下)显示定位变得疯狂的视觉效果。对此我深表歉意。

Answer 1

这是我理解的问题的根源。 <span> 的高度增加了元素绑定(bind)到视口(viewport)的高度，所以文本容器是 <span>通过 bottom 元素的高度与它的位置同时增加和 left使用视口(viewport)宽度/高度进行调整。在 css 中删除元素的高度设置，可能会解决您遇到的问题。如果这不是您问题的解决方案，请在下面发表评论，我们可以共同努力找到适合这种情况的解决方案。谢谢。

html, body {
    font-size: 1rem;
    height: 100%;
}

figure {
  display: flex;
  position: relative;
  z-index: 1;
}

img {
  height: 100%;
}

span {
  bottom: 3.5vh;
  color: #FFF;
  font-size: 1.9vw;
  /* height: 4vh; No need for this line right here. */ 
  left: 1.1vw;
  position: absolute;
  text-shadow: 2px 2px 0px rgba( 0, 0, 0, 0.5 );
  text-transform: uppercase;
  width: 37vw;
  z-index: 2;
}

<figure>
  <img src="http://nick.mtvnimages.com/nick/promos-thumbs/videos/spongebob-squarepants/rainbow-meme-video/spongebob-rainbow-meme-video-16x9.jpg?quality=0.60" />
  <span>f51bbe1e-7445-4545-bb84-15e614a119a2</span>
</figure>