Question

我目前正在开发一种布局，需要在移动设备，平板电脑和桌面设备上采用不同的布局。

移动 - 已堆叠
平板电脑 - 两列布局
桌面 - 三栏

我发现我的两个列布局一直到我的桌面布局，但情况并非如此。平板电脑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

问题是您的$平板电脑媒体查询没有最大宽度，因此它仍然可以与$桌面媒体查询冲突。像这样添加最大宽度，它可以根据需要使用。

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

我发现在像

这样的元素中组织媒体查询更容易

{{1}}

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

如何覆盖波旁威士忌整齐欧米茄（）

1 个答案: