css - 更改窗口大小时将 div 固定到其他 div

Question

问题是语音气泡只固定在浏览器特定宽度的选项卡上:

参见 here亲自尝试一下。

相关代码为

<ion-tabs class="tabs-icon-top tabs-positive">
  <div class="bubble-bar-tabs">
    <div class="b-home"></div>
    <div class="b-about"></div>
    <div class="b-cont"></div>
  </div>
  <ion-tab title="Home" icon="ion-home" href="#/tab/home">
    <ion-nav-view name="home-tab"></ion-nav-view>
  </ion-tab>
  <ion-tab>...
  <ion-tab>...
</ion-tabs>

与

.bubble-bar-tabs {
    position: absolute;
}

.b-home {
    display: block; 
    line-height: normal;
    z-index: 1000;
    position: absolute;
    left: 3rem;
    top: -75px;
    width: 219px;
    height: 70px;
}

如何针对所有浏览器窗口尺寸/屏幕尺寸修复对话泡泡与选项卡的对齐方式？谢谢。

Answer 1

您应该尝试对宽度和高度的值而不是像素使用百分比，因为百分比值取决于屏幕尺寸和包含它的元素。因此，对于您的 CSS 代码，我建议应该如下所示:

.b-home {
display: block; 
line-height: normal;
z-index: 1000;
position: absolute;
left: 3rem;
top: -75px;
width: 33%;
height: 70px;
}

宽度百分比值可以让您将气泡保持在特定的屏幕尺寸。另外，我建议留出一定余量，这样气泡就不会相互干扰。

对于移动设备，您需要实现@media screen 来为移动设备启用自定义CSS。这方面的一个例子是:

@media screen and (max-width: 600px) {
 .aClassforSmallScreens {
      clear: both;
  font-size: 1.3em;
 }
}