Адаптивная верстка с Bootstrap 4

210
12 мая 2019, 21:10

Подскажите, пожалуйста, как сделать так что бы на мобильной версии заголовок страницы был одного размера, а на компьютерной версии другого размера.

Например:

На мобильной версии:

<h5>Tittle</h5>

На компьютерной:

<h1 class="display-1">Tittle</h1>

Дело в том, что моя надпись (заголовок) вылазит за границы сайта при уменьшении его до мобильной версии и поэтому я хочу узнать - можно ли сделать так, что бы при разных размерах экрана будет по-разному высвечиваться моя информация?

Answer 1

Это можно сделать средствами медиа запросов CSS. Контрольные точки Bootstrap 4:

  • xs <576px
  • sm ≥576px
  • md ≥768px
  • lg ≥992px
  • xl ≥1200px

h1 { 
    font-size: 20px; 
} 
 
@media (min-width: 576px) { 
    h1 { 
        font-size: 60px; 
    } 
}
<h1>Tittle</h1>

READ ALSO
Как повесить событие onclick для родительского элемента и дочерного?
HTML

Как повесить событие onclick для родительского элемента и дочерного?

У меня есть двухступенчатый список:

 227
background-image слайдер, как сделать плавность?
HTML

background-image слайдер, как сделать плавность?

Всем привет! Есть у меня JS код слайдера при помощи background-imageПроблема в том, что он меняет изображения очень резко

 184
Помощь в реализации ползунка на svg
HTML

Помощь в реализации ползунка на svg

нужна помощь в реализации элемента интерфейсаРешил я реализовать 1 элемент, скрин его вы увидите ниже, и что-то понятия не имею как такое реализуется

 212
Как использовать scrollTop?
HTML

Как использовать scrollTop?

Как использовать scrollTop,? Объясните принцип работы пожалуйста

 234