使用Sass'Breakpoint Extension编写垂直媒体查询的首选方法

Question

使用Sass扩展断点，是否有一种首选方法来编写只有查询值的单个参数的垂直媒体查询？

以下是我最终要完成的一个例子：

@media (max-height: 50em) {
  .item {
    font-size: 2em;
  }
}

或者，我应该为这些样式做一个简单的“即时”媒体查询：

.item {
  @media (max-height: 50em) {
    font-size: 2em;
  }
}

这可能是用变量处理的吗？

我的样式是“移动优先”，因此本网站上的所有其他媒体查询都使用断点的默认“最小宽度”设置。

谢谢！

Answer 1

您可以执行以下操作：

$vertical: 'max-height' 50em;

.item {
  @include breakpoint($vertical) {
    font-size: 2em;
  }
}

您还可以使用其他查询包含高度查询，如下所示：

$mixed: 15em ('max-height' 50em);

.item {
  @include breakpoint($mixed) {
     font-size: 2em;
  }
}