Css 在断点中切换网格设置的正确方法

我试图为网格定义一些默认行为，然后在特定断点处覆盖它们。在下面的示例中，我希望两个div堆叠在彼此的顶部，并稍微修改默认值的边沟设置，然后在800px及以上，我希望div堆叠在彼此的旁边。第二部分没有发生。似乎低于800px场景中的一些余量设置正在应用于高于800px场景。请让我知道如何编写代码并遵守susy最佳实践

HTML:

我还制作了一个代码笔示例，可以在这里找到：

---

这看起来像是一次黑客攻击，但希望你能从中有所收获！我在您的代码笔中添加了以下内容：

.primary, .secondary {
  display: inline-block;
  margin: gutter(12);
  width: span(12);
  width:500px;
}

---

这看起来像是一次黑客攻击，但希望你能从中有所收获！我在您的代码笔中添加了以下内容：

.primary, .secondary {
  display: inline-block;
  margin: gutter(12);
  width: span(12);
  width:500px;
}

---

是的，Susy只是在写CSS值，所以你必须像处理普通CSS一样处理这个问题。Susy不知道您的DOM，因此它无法知道您想要覆盖以前设置的值。如果我们假设您总是希望重写，那么我们将不得不输出大量臃肿的代码

这里有两种解决方案：

• 将您的小屏幕布局放在

  最大宽度

  媒体查询中，这样就不会影响较大的屏幕
• 或者：覆盖大屏幕媒体查询中的那些全局值。要解决的问题是初始

  split

  排水沟添加的额外边距

我更喜欢第一种解决方案，因为我认为覆盖是丑陋的。但是，如果您正在处理一些不支持媒体查询的小型浏览器（这些浏览器还存在吗？），那么您需要使用第二种解决方案。尝试：

@include susy-breakpoint(max-width 800px, 12 0.5 split) {
    .primary{
        @include span(12);
    }

    .secondary{
        @include span(12);
    }
}

---

是的，Susy只是在写CSS值，所以你必须像处理普通CSS一样处理这个问题。Susy不知道您的DOM，因此它无法知道您想要覆盖以前设置的值。如果我们假设您总是希望重写，那么我们将不得不输出大量臃肿的代码

这里有两种解决方案：

• 将您的小屏幕布局放在

  最大宽度

  媒体查询中，这样就不会影响较大的屏幕
• 或者：覆盖大屏幕媒体查询中的那些全局值。要解决的问题是初始

  split

  排水沟添加的额外边距

我更喜欢第一种解决方案，因为我认为覆盖是丑陋的。但是，如果您正在处理一些不支持媒体查询的小型浏览器（这些浏览器还存在吗？），那么您需要使用第二种解决方案。尝试：

@include susy-breakpoint(max-width 800px, 12 0.5 split) {
    .primary{
        @include span(12);
    }

    .secondary{
        @include span(12);
    }
}