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

时间:2017-12-27 03:52:17

标签: html css twitter-bootstrap responsive-design

我正在尝试使用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>

2 个答案:

答案 0 :(得分: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元素中删除绝对定位,并根据需要更改字体大小。

答案 1 :(得分:0)

使用自适应嵌入

允许浏览器根据其包含块的宽度确定视频或幻灯片尺寸,方法是创建一个可在任何设备上正确缩放的内在比例。

  

规则直接适用于

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

和元素;可选地使用显式后代   如果要匹配样式,请设置.embed-responsive-item   其他属性。

Pro尖端!您不需要在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