Bourbon 整齐的多个断点

Posted 2023-03-06

【中文标题】Bourbon 整齐的多个断点

【英文标题】：Bourbon neat multiple breakpoints

【发布时间】：2013-06-09 01:55:55

【问题描述】：

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

$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

【问题讨论】：

根据您的断点定义，仅指定 $tablet 还不够，$tablet 还包含 $mobile。

对不起；我忘了提到平板断点上的最小宽度。平板上有最小宽度断点。

这样做有什么意义，无论如何媒体查询占用的空间很小。您可能会节省两行，但您更有可能添加行。

你的意思是我应该添加一个新的断点？我可以这样做，但我在想是否有办法同时指定 2 个断点并且它知道如何合并它们。

在变量中放置断点有什么意义？您应该以正常方式指定所需的所有断点。我可以看到可能想将它们包含的样式放在 vars 中，但是断点本身，我真的不明白这一点。

【参考方案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;  

【参考方案2】：

如果您想针对特定样式的移动设备和平板电脑，我认为您最好的选择是创建一个新断点：

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

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

【参考方案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 和 Breakpoint Slicer 很好地集成。