зацикливается дивы в другие дивы при изменении размера окна

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; 
} 
} 

Answer 2

Ваша проблема основана на вашей структуре HTML.

каждый <div class="b-home"></div> должен быть сыном элемента <ion-tab title=....

Затем измените CSS с

.b-home { 
    display: block; 
    line-height: normal; 
    z-index: 1000; 
    position: absolute; 
    left: 50%; // here you specify that the start of the bubble is 50% from left, adapt it to your need 
    **top: -5px;** // Here, you specify that your content is 5 pexel HIGHER than the top 
    width: 219px; 
    height: 70px; 
} 

Кроме того, в отношении ширины и высоты, имея ширину затруднительное высоту рассосется содержимого перекрытием другого содержимого, когда изменение размера страницы. Гораздо лучше использовать% to addapt для высоты страницы & width.