Question

我使用SASS（SCSS），但媒体查询有一些问题。

我所拥有的：

$breakpoint-sm: 650px;
$breakpoint-md: 950px;


.something {
    width: 200px;
    height: 200px;

    @media (min-width: $breakpoint-sm) and (max-width: $breakpoint-md) {
           width: 80px;
           height: 80px;
     }
}

我想要的东西（首先移动）：

在650px和950px之间完全-。某事应该具有 80px的宽度和高度
其他所有内容-其他应该具有200px的宽度和高度

问题： @media (min-width: $breakpoint-sm) and (max-width: $breakpoint-md)从650px到950px工作。我想要650，949。我要在950上应用200px的宽度和高度。

此解决方案正确吗？

.something {
    width: 200px;
    height: 200px;

    @media (min-width: $breakpoint-sm) and (max-width: $breakpoint-md - 1) {
           width: 80px;
           height: 80px;
     }
}

此解决方案有效，但我认为从断点中减去1（尤其是从变量中减去）是个坏主意。

谢谢

Answer 1

您可以在SASS中尝试此操作。

$breakpoint:(sm: 650px, md: 950px)


.something {
    width: 200px;
    height: 200px;

    @include media('>=sm', '<md') {
       width: 80px;
       height: 80px;
    }

}

@include媒体可让您执行“大于”，“小于”等

@include media

Answer 2

我想您正在将$breakpoint-md用作下限或上限约束，因此不能仅将其设为949px。

使用减号就可以了，该功能在浏览器中是有原因的

@media (min-width: $breakpoint-sm) and (max-width: $breakpoint-md - 1)

另一种选择是指定每个“大小”的起点和终点，但是我认为这不太清楚。

...
$breakpoint-sm: 650px;
$breakpoint-sm-max: 949px;
$breakpoint-md: 950px;
$breakpoint-md-max: 1199px;
$breakpoint-lr: 1200px;
...

媒体查询之间的间隔为1像素

2 个答案: