Как добавить медиа-запросы в Angular5 с помощью Sass & bootstrap 4.1.3 - PullRequest
Новая
       26

Как добавить медиа-запросы в Angular5 с помощью Sass & bootstrap 4.1.3

0 голосов
/ 13 сентября 2018

Я работал над проектом, имеющим несколько страниц. Его веб-версия почти завершена, и мне нужно работать над адаптивным сейчас. Поскольку я новичок в angular, я хочу знать, как мне добавлять медиазапросы в angular5, используя SASS & Bootstrap.

Я провел несколько исследований и разработок и нашел способ добавить медиа в файл css, что-то вроде этого: 

/**** Define media breakpoint variables**/
$desktop: 960px
$tablet: 768px
$mobile-large: 640px
$mobile: 480px
$mobile-small: 300px

/**** mix your media queries inside a class that you want to change**/
.item
  width: 25%
  display: inline-block
  @media only screen and (max-width: $tablet)
    width: 50%
  @media only screen and (max-width: $mobile-large)
    width: 100%

Что такое правильный стандарт.

Спасибо

1 Ответ

0 голосов
/ 13 сентября 2018

Если вы используете bootstrap & SASS, это может выглядеть так: 

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

Больше информации в документах: https://getbootstrap.com/docs/4.0/layout/overview/

...