html - 如何覆盖 bourbon neat Omega()

Question

我目前正在设计一种布局，需要在移动设备、平板电脑和台式机上使用不同的布局。

1. 移动 - 堆叠
2. 平板电脑 - 两列布局
3. 桌面 - 三列

我发现我的两列布局一直坚持到我的桌面布局，但事实并非如此。平板电脑 omega(2n) 似乎一直坚持到我的桌面布局......它应该是 omega(3n) – 我认为它会覆盖欧米茄(2n)。我该如何解决这个问题？我可以编辑我的断点以包括最大值，但从那里开始需要更多的腿部工作，我认为这是不必要的。这是 pen

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);
    }
}

Answer 1

问题是您的 $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);    
  }
} 

现在，您的颜色、高度和底部边距可跨屏幕尺寸共享，但列会响应媒体查询。移动设备不需要媒体查询，因为它已成为默认设置。