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

Question

我正在尝试使用具有最小宽度要求的媒体查询进行移动优先布局。只有加 1 才能达到 "greater than but NOT equal to" 最小宽度吗？这对我来说似乎不直观，因为我将我的断点值存储在 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 like

@mobile-breakpoint: 360px;

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

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

Using media query min-width for mobile breakpoints

css

less

LESS 方式：-