如何覆盖波旁威士忌纯欧米茄()

Question

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

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

我发现我的两列布局一直坚持到我的桌面布局，但情况并非如此。似乎平板电脑omega(2n)一直粘在我的桌面布局上......它应该omega(3n)的地方——我以为它会覆盖欧米茄(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>

南海

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

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