如何覆盖波旁纯欧米茄（）

Question

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

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

我发现我的两列布局一直坚持到我的桌面布局，这不应该是这种情况。似乎平板电脑omega(2n)一直坚持到我的桌面布局......它应该是omega(3n) - 我认为它会覆盖Omega（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);    
  }
} 

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