Подтвердить что ты не робот

Bootstrap 4 - как использовать медиа-запрос mixin

Как установить точку прерывания для носителя, скажем, от среднего до большого - я вставляю min mixin и max mixin или как это сделать.

вывод, который я за ним, выглядит примерно так: @media (min-width: 480px) и (max-width: 767px) с использованием mixpoint breakpoint.

Ответ 1

Используйте media-breakpoint-between($lower, $upper)

Зависимости

Миксины объявлены в mixins/_breakpoints.scss и зависят от карты $grid-breakpoints, найденной в _variables.scss.

Пример

Карта точек останова:

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
)

Mixin:

@include media-breakpoint-between(sm, md) {
    // your code
}

Скомпилировать

@media (min-width: 576px) and (max-width: 991px) {}

Важное уведомление

Точка прерывания медиаданных - между mixin использует "нижнее" и "верхнее" значения объявленной точки останова.

"Нижнее" значение точки останова является объявленным значением в $ grid-breakpoint.
"Верхнее" значение конкретной точки останова равно значению более высокая точка останова минус 1px.

Пример верхнего и нижнего значений точки останова (на основе таблицы $grid-breakpoint)

Lower value of md is equal to 576
Upper value of md is equal to 991 ( value of next breakpoint (lg) minus 1px (992px-1px)

Другие медиа-микшины

@include media-breakpoint-up(sm) {} создает точку останова с минимальной шириной $sm.

@include media-breakpoint-down(md) {} создает точку останова с максимальной шириной $md.

Ответ 2

Здесь также mixin media-breakpoint-between($lower, $upper)

Итак, это должно работать

@include media-breakpoint-between(sm, md){
  // this applies only between the sm and ms breakpoints 
}

Ответ 3

Вы делаете комбо из двух классов. (Также BS4 использует rems теперь не px.)

Пример... (От: http://codepen.io/j_holtslander/pen/jbEGWb)

<!-- Jay Viewport Helper -->
<div style="position:fixed;top:0;left:0;background-color:rgba(0,0,0,0.5);padding:10px;color:#fff;">
  <span class="hidden-sm-up">SIZE XS</span>
  <span class="hidden-xs-down hidden-md-up">SIZE SM</span>
  <span class="hidden-sm-down hidden-lg-up">SIZE MD</span>
  <span class="hidden-md-down hidden-xl-up">SIZE LG</span>
  <span class="hidden-lg-down">SIZE XL</span>
</div>
<!-- /Jay Viewport Helper -->