7

我知道以下可以用波旁威士忌完成：

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

3 回答 3

5

不确定是否有人仍然需要这个，但我做了以下功能：

@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; } }
于 2015-11-09T15:33:39.750 回答
3

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

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

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

于 2015-03-30T11:19:11.667 回答
0

这不是与波旁威士忌相关的答案，但无论如何。

有一个Compass扩展可以完全满足您的需求：Breakpoint Slicer。

您只需像这样设置断点：

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

然后只需使用 short 、 和atmixinsfrom解决断点（称为“切片”）之间的间隙。例如，将设置一个媒体查询。tobetween@include at(2)min-width: 320px, max-width: 760px

凭借众多强大的 Compass 扩展的生态系统，真的没有理由喝醉波旁威士忌。对于强大的语义网格，请使用Singularity，它与Breakpoint和 Breakpoint Slicer 很好地集成在一起。

于 2013-06-13T20:06:35.927 回答