波旁整洁多个断点

Question

我知道以下是波旁威士忌:

$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
}

效果很好。现在我必须添加影响手机和平板电脑的样式。我在寻找手机和平板电脑的结合点。

//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
}

Answer 1

不确定是否有人仍然需要这个，但我做了以下函数:

@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; } }

Answer 2

如果你想针对手机和平板电脑的特定风格，我认为你最好的选择是创建一个新的断点:

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

并在此断点下添加所有特定的css

Answer 3

这不是一个与波旁酒有关的答案，但无论如何。

有一个Compass扩展可以完全满足你的需求:断点切片器。

你只需像这样设置你的断点:

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

然后用短的at, from, to和between混合来处理断点之间的间隙(称为"片")。例如，@include at(2)将设置min-width: 320px, max-width: 760px的媒体查询。

有了众多强大的指南针扩展的生态系统，真的没有理由去喝波旁威士忌。对于一个强大的语义网格，请使用Singularity，它与Breakpoint和Breakpoint Slicer集成得很好。