使用媒体查询最小宽度用于移动断点

Question

我正在尝试使用具有最小宽度要求的媒体查询进行移动优先布局。通过加1来实现“大于但不等于”最小宽度的唯一方法是什么？这对我来说似乎不直观，因为我将断点值存储在LESS变量中，并且希望在没有加号的情况下存储实际断点。

@mobile-breakpoint: 361px;
// breakpoint is actually at 360px

@media (min-width: @mobile-breakpoint) {
    //styles for widths greater than but not equal to 360
}

Answer 1

在媒体查询中使用calc函数在多个断点中添加1px

@mobile-breakpoint: 360px;

@media (min-width: calc(@mobile-breakpoint + 1px)) {
    //styles for widths greater than but not equal to 360
}

不幸的是，我们没有任何其他简单的方法来获取媒体查询中的精确方法

LESS方式： -

正如提到的七个阶段 - 我们可以通过简单地添加LESS之类的方式使用+1来实现相同的目标

@mobile-breakpoint: 360px;

@media (min-width: (@mobile-breakpoint + 1)) {
    foo {bar: baz}
}