如何使绝对定位的元素具有响应性？

Question

我正在尝试使用 Bootstrap 元素制作交互式标签云。结果没问题，但我使用绝对定位从周围div 的顶部和左侧定位了不同的标签。它粘贴在下面，但因为它是相当多的代码，我也用代码制作了this fiddle（注意：sn-p 旨在以全桌面屏幕宽度查看）。

但是，因为我使用了绝对定位，所以我失去了 Bootstrap 列提供的响应能力。相反，多词标签会分成多行，标签最终相互重叠，以及其他不受欢迎的行为。

我也想让标签云响应，但我不太确定该怎么做。似乎要对媒体查询执行此操作，我需要非常频繁地对宽度进行采样。另一个想法是使用 JQuery 根据窗口宽度调整位置（可能还有字体大小），但这也不能解决问题。

我的最终目标是在屏幕尺寸发生变化时保持内部 div（即标签）的相同相对位置。在某些时候，列可以堆叠，但在列堆叠之前，我希望能够保持相同的标签布局，即使这意味着减少标签之间的空白空间，甚至减少标签的字体大小。在这两种情况下，我都希望使更改与屏幕尺寸的变化成比例。

那么，我怎样才能让这个标签云响应屏幕大小的变化，同时保持内部 div“标签”的布局？

.tmp{
	background-color: #000;
	height: 600px;
}

.tagcloud{
	font: "Arial Bold";
	font-weight: bolder;
	height: 600px;
	background-color: #202020;
	position: relative;
	text-align: center;
	min-width: 700px;
}

.tagcloud div{
	position: absolute;
}

.tagcloud a{
	text-decoration: none;
	color: inherit;
}

.tagcloud a:hover{
	text-decoration: underline;
}

.tagcloud .l1{
	font-size: 80px;
	cursor: pointer;
}

.tagcloud .l2{
	font-size: 68px;
	cursor: pointer;
}

.tagcloud .l3{
	font-size: 56px;
	cursor: pointer;
}

.tagcloud .l4{
	font-size: 44px;
	cursor: pointer;
}

.tagcloud .l5{
	font-size: 38px;
	cursor: pointer;
}


#item1{
	color: #c9d35f;
	top: 10px;
	left: 150px;
}

#item2{
	color: #09c9b9;
	top: 210px;
	left: 440px;
}
#item3{
	color: #ba612e;
	top: 410px;
	left: 310px;
}
#item4{
	color: #4b7711;
	top: 275px;
	left: 130px;
}
#item5{
	color: #1bb1fc;
	top: 130px;
	left: 560px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 tmp"></div>
    <div class="col-sm-6 col-centered tagcloud">
      <div class="l1" id="item1">
        <a data-container="body" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="Some text">
          First Item</a>
      </div>
      <div class="l2" id="item2">
        <a data-container="body" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="Some text">
          Another Item
        </a>
      </div>
      <div class="l3" id="item3">
        <a data-container="body" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="Some text">
          Item3
        </a>
      </div>
      <div class="l4" id="item4">
        <a data-container="body" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="Some text">
          Item4
        </a>
      </div>
      <div class="l5" id="item5">
        <a data-container="body" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="Some text">
          Item5
        </a>
      </div>
    </div>
  </div>
</div>

Answer 1

您可以使用 CSS3 中的 vw 单位来设置 font-size 属性。这将导致标签根据浏览器的宽度进行缩放：

W3Schools - CSS Units

标签的位置也应该使用 %（如果它们在容器中）或 vh 和 vw 单位（如果您的标签云填满整个窗口）。在您的情况下，这很可能意味着为您的 top 和 left CSS 属性使用百分比单位。

所有这些都意味着文本大小和位置都将与浏览器视口相关。

但是，它只会给你partial browser support。如果需要支持旧版浏览器，可以改用vUnit.js。

可选：

您还可以将 CSS 与后备组合使用，通过使用 Modernizr 检查 Viewport Unit 支持 - 然后您可以将 CSS 用于较新的浏览器，并将 vUnit 用于较旧的浏览器。

可以使用以下方法防止多字链接中断换行：

.tagcloud a { white-space: nowrap; }

一旦您的列折叠（例如，在移动宽度），您可能希望垂直堆叠标签，这样字体就不会变得太小。如果是这种情况，您可以使用媒体查询从 div 元素中删除绝对定位，并根据需要更改字体大小。

Answer 2

使用响应式嵌入

通过创建可在任何设备上正确缩放的固有比例，允许浏览器根据其包含块的宽度确定视频或幻灯片的尺寸。

规则直接应用于

<iframe>, <embed>, <video>,

和元素；可选地使用显式后代 class .embed-responsive-item 当您想要匹配的样式时 其他属性。

专业提示！您不需要在您的文件中包含 frameborder="0"，因为我们会为您覆盖它。

<!-- 16:9 aspect ratio --> 
<div class="embed-responsive embed-responsive-16by9"> 
<iframe class="embed-responsive-item" src="..."></iframe> 
</div>
 <!-- 4:3 aspect ratio --> 
<div class="embed-responsive embed-responsive-4by3"> 
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

更多详情请参考： https://getbootstrap.com/docs/3.3/components/#responsive-embed