@freeman0204

Как создать свои медиа запросы на scss что бы совпадали с bootstrap?

Это брекпоинты и ширина контейнера с файла _variables.scss хочу создать на scss свои медиа которые зависят и связаны с теми что есть в bootstrap что бы допиливать то что не могу сделать на bootstrap. Как это можно сделать?
// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include _assert-starts-at-zero($grid-breakpoints);


// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;
@include _assert-ascending($container-max-widths, "$container-max-widths");
  • Вопрос задан
  • 2810 просмотров
Решения вопроса 2
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199px) { ... }

https://v4-alpha.getbootstrap.com/layout/overview/...
Ответ написан
delphinpro
@delphinpro Куратор тега Вёрстка
frontend developer
Вам нужно использовать встроенные миксины бутстрапа. Все они здесь https://github.com/twbs/bootstrap/blob/v4-dev/scss...

media-breakpoint-up()
media-breakpoint-down()
media-breakpoint-between()
media-breakpoint-only()

В качестве параметров передаётся название контрольной точки (ключи из переменной $grid-breakpoints) - xs, sm, md, lg, xl.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы