Question

我将首先描述问题，然后说明如何设置媒体查询。

问题在于，恰好宽度978px，媒体查询被忽略了。

这是我的网站在977px wide上的样子
这是978px wide

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

这是代码（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;
    }
}

媒体查询仅精确达到978px

1 个答案: