媒体查询问题仅精确到978px

Question

我将首先描述这个问题，然后展示如何设置媒体查询。

问题是，在正好978px宽的位置，媒体查询被忽略。

这是我的网站977px宽的样子
这是978px宽的

背景图像消失。正在使用媒体查询设置背景图像，以便可以在较小的设备上加载较小的图像。

这是代码(SCSS(：

//Desktop
@include desktop {
background: $header-desktop-img;
}
//Tablet
@include tablet {
background: $header-tablet-img;
}

以下是用于台式机和平板电脑的媒体查询：

$break-desktop: 978px;    
//Desktop
@mixin desktop {
@media (min-width: #{$break-desktop + 1}) {
@content;
}
}
//Tablet
@mixin tablet {
@media ((max-width: #{$break-desktop}) {
@content;
}
}

据我所知，媒体查询是包容性的，所以媒体查询不应该有差距，但出于某种原因，确实存在。

如果有人知道如何解决这个问题，请告诉我。

Answer 1

如果您的浏览器被缩放(如90%、110%(，在某些情况下可能会导致舍入问题，这可能就是您正在经历的问题。然而，即使不是这样，我通常也建议不要同时使用最小和最大宽度查询，而是使用移动优先的方法。也就是说，首先编写应用于尽可能小的屏幕的基本样式，然后只编写覆盖以前断点的最小宽度查询。在这种方法中，可以保证查询中不会出现任何空白。例如，

.some-selector {
width: 100%;
@media screen and (min-width: 768px) {
text-align: center;
}
@media screen and (min-width: 992px) {
width: 50%;
text-align: left;
}
}