Как перезаписать неразбавленный бурбон Omega()

В настоящее время я работаю над макетом, который требует другого макета для мобильных устройств, планшетов и компьютеров.

  1. Мобильный – с накоплением
  2. Планшет — макет из двух столбцов
  3. рабочий стол — три столбца

Я обнаружил, что мой макет с двумя столбцами полностью соответствует макету моего рабочего стола, чего не должно быть. Кажется, что планшет omega(2n)прилипает к моему рабочему столу... там, где он должен быть omega(3n) — я думал, что это заменит Omega(2n). Как решить эту проблему? Я мог бы отредактировать свои точки останова, чтобы включить максимальное значение, но оттуда становится больше работы, которую я считаю ненужной. Вот ручка

HTML

<div class="boxes">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
</div>

SCSS

$mq-s :  em(400);
$mq-m :  em(768);
$mq-l :  em(960);
$mq-xl:  em(1700);

// Breakpoints
$mobile:            new-breakpoint(min-width $mq-s 6);
$tablet:            new-breakpoint(min-width $mq-m 12);
$desktop:           new-breakpoint(min-width $mq-l 12);
$large-desktop:     new-breakpoint(min-width $mq-xl 12);

.boxes{
  @include outer-container;
}

@include media ($tablet){
  li {
    background: tint(red,50%);
    margin-bottom: 20px;
    @include span-columns(6);
    @include omega(2n);
    height: 40px;
  }
}

@include media ($desktop){
  li{
      @include span-columns(4);
      @include omega(3n);
    }
}

html css bourbon neat
person Samuel    schedule 20.03.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Проблема в том, что ваш медиа-запрос $tablet не имеет максимальной ширины, поэтому он все еще может конфликтовать с медиа-запросом $desktop. Добавьте максимальную ширину, подобную этой, и она будет работать так, как вы хотите.

$tablet:    new-breakpoint(min-width $mq-m max-width 959px 12);

Мне проще организовывать мои медиа-запросы в таких элементах

li {
  background: tint(red,50%);
  height: 40px;
  margin-bottom: 20px;    

  @include media($tablet){
    @include span-columns(6);
    @include omega(2n);
  }

  @include media($desktop){
    @include span-columns(4);
    @include omega(3n);    
  }
}

Теперь ваши цвета, высота и нижние поля одинаковы для разных размеров экрана, но столбцы реагируют на медиа-запросы. Для мобильных устройств не требуется медиа-запрос, поскольку он становится стандартным.

person Loomernescent    schedule 12.07.2017
comment
У меня было бы слишком много медиа-запросов, нет? Это также сделало бы поиск элементов скучным. - person Samuel; 12.07.2017