即使只是调整大小，在不同视口上设置样式元素？

Question

我当然不是CSS的粉丝而且我讨厌更灵敏的布局，但我正在创建一个带Bootstrap的UI（版本4，重要的是），其中我有一些绝对定位的元素。 ＃39; t完全按照我想要的方式对齐，无论是在不同的原始分辨率（监视器还是VGA定义的）或简单地调整视口（即 Ctrl + + ）。

自从我开始创建此UI以来，我使用vh和vw单位来处理大多数元素（当然除了那些与Bootstrap Grid相关的元素），我认为我不会这样的问题，这个决定对大多数情况都很有效。

然而，直到现在，我使用的是一台旧的非常小的显示器（1366x768），最近我（最终）获得了21.5＆＃34;监视器（FullHD，如果这很重要）和我在CSS规则中定义的这些值，经过详尽的测试后，现在略微错位，有点左侧或顶部。例如：

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

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

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

这些规则是在小型监视器中进行开发时创建的，其中足以使文本在此背景图像的框中居中。但是现在，在更大的显示器中，我拍摄了这个截图，你可以看到文字与左边对齐。我知道，可能很难注意到，但这是一幅更大的画面，不幸的是，我无法表现出更多：（

好吧，我即将开始修复基于大屏幕的所有问题，例如，将left更改为3.4vw，但后来我意识到，如果出于任何原因有人访问网站与我以前的情况相同，用户体验会受到偏见。

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

更糟！关于视口调整大小，Firefox的增长率为10％，而Chrome的范围更广（25％，33％，50％67％......），其他浏览器可能还有其他值。因为我不是专家，所以我不知道我正在寻找创造规则的价值观。

任何人都可以帮助我吗？

  

虽然它会很棒，但我并不打算将整个用户界面放在例如iPhone 5的视口中（我发现的最小的用户界面） Chrome开发者工具，568x320）。我只是不希望这些小图标和文字绝对不合适。

[编辑]

描述一个小提琴的场景比我想象的更难，这就是为什么我试图避免它。但正如所问，in this one我尽可能地定位，并且在默认预览区域看起来很不错。但只是通过调整文本大小已经远远没有定位。

所以我制作了this one，专门用于嵌入式版本。我相信它会更好，因为它将编辑器放在一个窗口中并将预览放在另一个窗口中（浏览器）。

然而，他们都没有真正反映我的真实情况。虽然标记在<img>内同时兼容<span>和<figure>，但在调整视口时，我不会有这些重大更改。我在bottom和left上只有很少的错位。

我可能没有提取我应该做的一切。我已经获得了大部分网格，其中包含此图像（或更大的完整版本）。 .box不相关，因为它只有几行线性和径向渐变以及一些box-shadow。

整个用户界面很复杂，我可能已经从这些小提琴中留下了一些东西，但至少是一种视觉效果，在调整大小时（肯定在不同的分辨率下）显示定位变得疯狂。我为此道歉。

Answer 1

这是我理解的问题的根源。与视口高度相关联的<span>元素的高度会增加，因此<span>元素的文本容器在通过{{的位置同时增加高度使用视口宽度/高度调整1}}和bottom。在css中删除元素的高度设置可能会解决您遇到的问题。如果这不是您问题的解决方案，请在下面留言，我们可以共同合作，以适应这种情况。谢谢。

left

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;
}