Css 波旁多断点

我知道波旁威士忌可以做到以下几点：

$mobile: new-breakpoint(max-width: 320px);
$tablet: new-breakpoint(max-width:760px min-width:321px);
$desktop: new-breakpoint(min-width: 761px);

然后我可以这样做：

@include media($mobile) {
    // some styling
}

$slicer-breakpoints: 0 320px 760px;
// Slices:           | 1 |  2  |  3  →

它工作得很好。现在我必须添加影响手机和平板电脑的样式。我正在寻找移动和平板电脑断点联盟

//desired behavior 
//I know this is not available. Just made up
@include media($mobile, $tablet) {
    // some styling.
    // this should be applied to mobile and tablet
}

---

这不是一个与波旁威士忌有关的答案，但无论如何

有一个扩展可以完全满足您的需要：

您只需按如下方式设置断点：

@include media($mobile) {
    // some styling
}

$slicer-breakpoints: 0 320px 760px;
// Slices:           | 1 |  2  |  3  →

然后用短的

at

，

from

，

to

和

混合之间的
来解决断点（称为“切片”）之间的间隙。例如，
@include at（2）
将设置
最小宽度：320px，最大宽度：760px
媒体查询

在众多强大罗盘延伸的生态系统中，真的没有理由喝波旁威士忌。对于功能强大的语义网格，请使用，它与和断点切片器很好地集成。
如果您想针对特定样式的手机和平板电脑，我认为您最好的选择是创建一个新的断点：

$mobile-to-tablet: new-breakpoint(max-width:760px min-width:321px $cols);

并在此断点下添加所有特定css。
不确定是否还有人需要此功能，但我创建了以下功能：

@mixin multiple-media($media...) {
  @each $query in $media {
    @include media($query) {
      @content
    }
  }
}

这对我很管用

@include multiple-media($mobile-landscape, $tablet-portrait, $tablet-landscape, $laptop, $desktop) {
  .mobile {
    @include display(none);
  }
}

产生

@media screen and (min-width: 29.25em) and (max-width: 48em) and (max-height: 29.25em) {
  .logo a .mobile {
    display: none; } }
@media screen and (min-width: 29.25em) and (max-width: 50em) and (min-height: 29.25em) {
  .logo a .mobile {
    display: none; } }
@media screen and (min-width: 48em) and (max-width: 80em) and (max-height: 50em) {
  .logo a .mobile {
    display: none; } }
@media screen and (min-width: 80em) and (max-width: 105em) {
  .logo a .mobile {
    display: none; } }
@media screen and (min-width: 105em) {
  .logo a .mobile {
    display: none; } }

根据你的断点定义，仅仅指定$table还不够，$tablet包含$mobile；我忘了提到平板电脑断点的最小宽度。平板电脑上有最小宽度断点。这样做的目的是什么，媒体查询占用的空间非常小。您可以保存两行，但更可能添加行。您的意思是我应该添加一个新断点吗？我可以这样做，但我在想，是否有一种方法可以将两个断点指定在一起，并且它知道如何合并它们。在变量中放置断点有什么意义？您应该以正常方式指定所有需要的断点。我可以看出，可能想要将它们包含的样式放在vars中，但是断点本身，我并不真正理解这一点。