breakpoint-sass - dppx 或 min-width 组合查询

Question

当我使用@include breakpoint(min-resolution: 1.5dppx),

我得到这个输出：

@media (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (min-resolution: 144dpi)

这个快捷方式很好，但如果我尝试将它与另一个这样的查询结合起来：

@include breakpoint(min-resolution: 1.5dppx, 2050px)

我得到完全相同（最后一部分被删除）

然后，如果我添加一些引号：

@include breakpoint("2050px, min-resolution 1.5dppx")

我松开了跨浏览器部分：@media (min-width: 2050px, min-resolution 1.5dppx)

有没有办法成功地结合它们？

Answer 1

当使用or直接传递给 Breakpoint mixin 的查询时，您需要将整个查询包装在括号中，因为 Breakpoint mixin 的第二个参数是no-query. 您应该编写以下内容：

@include breakpoint((min-resolution 1.5dppx, 2050px)) {}

看看这个SassMeister 示例，看看它是如何工作的。