медиазапросы в SASS компилируются, но не отображаются - PullRequest
Новая
       10

медиазапросы в SASS компилируются, но не отображаются

0 голосов
/ 24 февраля 2019

Я создаю сайт с адаптивными медиа-запросами.У меня есть один запрос, который адаптируется, если экран 900px или меньше (максимальная ширина).Я создал миксин для управления запросами. 

@mixin responsive ($breakpoint){
@if $breakpoint == phone {
    @media(max-width: 37.5em){ @content };  // 600px
}
@if $breakpoint == tab-port {
    @media(max-width: 56.25em){ @content };   // 900px
}
@if $breakpoint == tab-land {
    @media(max-width: 75em){ @content };  // 1200px
}
@if $breakpoint == big-desktop {
    @media(min-width: 112.5em){ @content };  // 1800px
 }
}

Итак, я буду использовать его в SASS 

.div{

&__container {
    display: flex;
    padding: 5rem;
    margin: 0 auto;
    width: 80%;

    @include responsive(tab-port) {
        width: 90%;
    }

}

Он правильно компилируется 

.div__container {
  display: flex;
  padding: 5rem;
  margin: 0 auto;
  width: 80%; 
}
  @media (max-width: 56.25em) {

.div__container {

 width: 90%; 
 } 
}

Но на самом деле он не отображается на веб-сайте иначе как в 900px или меньше.Что я делаю не так?

1 Ответ

0 голосов
/ 24 февраля 2019

Медиа-запросы работают нормально, но из-за ширины отступа превышает 80%. 

.div {

  &__container {
      display: flex;
      // padding: 5rem;
      margin: 0 auto;
      width: 80%;
      border: 5px solid red;

      @include responsive(tab-port) {
          width: 90%;
          border: 5px solid blue;
      }

  }
}

Пример: https://codepen.io/anon/pen/MxgaVR

...