Question

我目前正在使用Bourbon Neat。我需要.posts__post在平板电脑上覆盖 3列中的3列，然后在桌面及更高版本上展示2 of 6。但是，我发现我的桌面媒体查询无法正常工作，平板电脑查询仍然可以通过桌面查看。

_grid.scss

$tablet: em(768);
$desktop: em(960);

// Breakpoints
$tablet: new-breakpoint(min-width $tablet 6) ;
$desktop: new-breakpoint(min-width $desktop 6);

posts.scss

@include media ($tablet) {
 .posts__post{
    @include span-columns(3 of 6);
    @include omega(2n);
  }
 }

 @include media ($desktop) { 
 .posts__post{
    @include span-columns(2 of 6); // only spans up to 4 columns in total
    @include omega(3n); // still remains as 2n
 }

这是我试图为[桌面] [1。不知道我做错了什么。如果$桌面媒体查询中的omega（3n）得到尊重，则可以解决这个问题，但不是，并且仍然是2n。

Answer 1

问题是当$桌面媒体查询生效时，它不会撤消$ tablet omega mixin。因此，在$桌面上，private boolean clearAuthentication = true;没有正确的边距，:nth-child(3n)被清除，但3n+1仍然没有正确的边距，2n仍然被清除。

您可能还需要修改媒体查询，以便在$ tablet查询中包含2n+1值。使用max-width mixin并不是很痛苦，因为你可以做类似的事情：

em()

如果继续将媒体查询变量命名为与断点宽度相同，那么事情可能会变得混乱，因此我建议使用$tablet: em(768); $tablet-max: em(959); $desktop: em(960);之类的内容。

或者，您可以将Flexbox和$mq-tablet与“block-collapse”显示属性一起使用。这可能需要对标记进行一些额外的调整，具体取决于您的设计。

总的来说，请提供问题的完整工作演示，以帮助解决问题。

Bourbon Neat在媒体查询中忽略了'omega'

1 个答案: