我正在尝试使用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>
答案 0 :(得分:1)
您可以在CSS3中使用 vw 单位设置 font-size 属性。这将导致标签根据浏览器的宽度进行缩放:
标签的位置也应使用%(如果它们在容器中)或 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