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扩展程序可以完全符合您的要求：Breakpoint Slicer。

您只需设置这样的断点：

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

然后使用短at，from，to和between混合来解决断点（称为“切片”）之间的差距。例如，@include at(2)将设置min-width: 320px, max-width: 760px媒体查询。

凭借无数强大的Compass扩展生态系统，没有理由和Bourbon一起喝酒。对于强大的语义网格，使用Singularity，它与Breakpoint和断点切片器很好地集成。

波旁整齐多个断点

3 个答案: