-1

我第一次使用纯波旁威士忌，但它的表现并不完全符合我的预期——这可能意味着我设置错了。

我正在开发移动优先，所以我希望我的布局在我的桌面断点和更大的断点之间保持相同（以便样式级联到下一个断点）。但是，除非我在较大的断点中再次重新定义样式，否则我的布局会跳回移动布局。

以下是我在 base/_grid-settings.scss 中定义断点的方式：

    // Neat Overrides
    $grid-columns: 4;
    $max-width: 90%;

    // Breakpoints
    $first-breakpoint-value: 641px;
    $second-breakpoint-value: 1024px;
    $third-breakpoint-value: 1440px;
    $fourth-breakpoint-value: 1920px;

    $tablet: new-breakpoint(min-width em($first-breakpoint-value) max-width em($second-breakpoint-value) 8 );
    $desktop: new-breakpoint(min-width em($second-breakpoint-value + 1) max-width em($third-breakpoint-value) 12 );
    $large: new-breakpoint(min-width em($third-breakpoint-value + 1) max-width em($fourth-breakpoint-value) 12 );
    $xlarge: new-breakpoint(min-width em($fourth-breakpoint-value +1) 12 );

然后我的元素看起来像这样：

.container {
  @include outer-container;

  .swatch {
    // mobile styles (here my swatch has a width of 100%) 
    border: 1px solid #000;
    text-align: center;
    margin-bottom: $gutter;

    //MEDIA QUERIES
    @include media($tablet) {
      @include span-columns(4);
      @include omega(2n); 
     }

    @include media($desktop) {
      @include span-columns(3);
      @include omega(4n); 
      padding: 2em -0px;
     }

    @include media($large) { }

    @include media($xlarge) { }
  }
}

现在我期待$desktop媒体查询中的样式一直级联到$xlarge媒体查询，但是目前该元素在和断点.swatch处跳回到其父容器的 100% 。我做错了什么？如果我希望样式级联，我不需要为每个断点重复相同的代码。$large$xlarge

4

3 回答 3

2

您正在定义一个媒体查询范围，这就是为什么它会在两者之间快速回到移动视图。

从断点中删除最大值，这些值将级联到桌面。

我不太熟悉整洁，但以下应该可以工作：

$tablet: new-breakpoint(min-width em($first-breakpoint-value) max-width em($second-breakpoint-value) 8 );

变成：

$tablet: new-breakpoint(min-width em($first-breakpoint-value) 8);
于 2014-11-10T04:26:46.127 回答
0

谢谢@nickspiel - 这是答案的一半！你是对的，添加 min-with only 断点是让样式级联断点的方法。使用 Bourbon Neat 和正在使用的元素来做到这omega一点有点棘手。

看来我有两个选择：

  1. 根据文档使用媒体查询拆分，但是您需要为每个断点设置样式。
  2. 将您对最小宽度断点的建议与Omega 重置结合使用- 我将使用此选项。
于 2014-11-10T16:52:02.863 回答
0

希望这可以帮助您或任何其他阅读这篇文章的人，我遇到了类似的问题并找到了这个方便的 omega reset mixin。

http://www.joshfry.me/blog/2013/05/13/omega-reset-for-bourbon-neat

于 2015-05-13T13:32:52.673 回答