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

Question

我正在尝试使用Bootstrap元素创建交互式标记云。它出来没关系，但我已经使用周围div的顶部和左侧的绝对定位来定位不同的标签。它粘贴在下面，但由于它是相当多的代码，我也用代码制作了this fiddle（注意：该片段旨在以完整的桌面屏幕宽度查看）。

但是，因为我使用了绝对定位，所以我失去了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单位（如果标签云填满整个窗口）设置。在您的情况下，这很可能意味着使用您的顶部和左侧CSS属性的百分比单位。

完成所有这些操作意味着文本大小和位置都将相对于浏览器视口。

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

可选：

您还可以将CSS与回退结合使用，使用Modernizr检查Viewport Unit支持 - 然后您可以将CSS用于较新的浏览器，将vUnit用于较旧的浏览器。

使用以下命令可以防止多字链接断开到新行：

.tagcloud a { white-space: nowrap; }

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

Answer 2

使用响应式嵌入

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

规则直接适用于

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

和元件;如果要匹配其他属性的样式，可以选择使用显式后代类.embed-responsive-item。

专家提示！您不需要在s中包含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