bootstrap - применить класс в зависимости от размера экрана

Question

Можно ли это сделать без использования экрана @media only?Или это лучший способ?

Например, я могу написать это в CSS?:

@include media-breakpoint-up(md) {
  .card {
    transform: translate(0px, -75px);
    z-index: 200;
  }
}

Я также хочу скрыть / показать div на основе экранаразмер.

Answer 1

Вам потребуется использовать медиа-запрос для преобразования, но вы можете использовать встроенные точки останова Bootstrap для свойства display. Например. d-md-none скроет элемент на md размере и выше.

Answer 2

Для отображения / скрытия div в зависимости от размера экрана, в bootstrap есть несколько классов, которые соответствуют стандартным контрольным точкам начальной загрузки для отображения / скрытия в зависимости от размера экрана: https://getbootstrap.com/docs/4.0/utilities/display/

Answer 3

Что вы можете сделать, это создать несколько таблиц стилей CSS на основе размеров экрана вашего носителя. затем внутри одной из ваших таблиц стилей CSS для этого конкретного размера экрана вы можете скрыть свой div.

Пример ссылки в вашем html:

<link rel = "stylesheet" media="screen and (min-width: 480px) and (max-width: 1920px)" href= "styles/desktop.css"/>

тогда внутри desktop.css вы можете иметь:

.card { display = none; }

Это будет скрывать ваш div, когда размер экрана между 480px и 1920px.