css - 如何使用 Bourbon Neat Framework 实现移动优先

Question

我一直在使用 bourbon neat 进行桌面优先布局，效果很好。

但是，我想做一个移动优先版本，从移动开始，然后逐步提高。默认网格为 12 列，对于移动设备，我通常使用 4 列网格。我尝试将网格更改为 4 并扩展到 12，但这没有用。

除了创建标准的桌面布局，然后将移动媒体查询放入每个 CSS 选择器并从移动版本开始并逐步构建之外，是否有更好的方法来实现移动优先？

Answer 1

您应该使用 Neat 的 new-breakpoint mixin 创建新的断点。但是，您可以使用 min-width，而不是像他们在示例中那样使用 max-width。

例如:

@import "bourbon/bourbon";
@import "neat/neat";

$mobile: new-breakpoint(min-width 0px 4);
$tablet: new-breakpoint(min-width 760px 8);

.main {
  background: grey;

  @include media( $mobile ) {
    @include span-columns(4);
    background: white;
  }

  @include media( $tablet ) {
    @include span-columns(8);
    background: black;
    color: white;
  }
}

在示例中，.main 将具有白色背景并由 4 列组成。当视口(viewport)宽度至少为 760 像素时，它将获得黑色背景并跨越 8 列。