Проблема медиазапроса только точно в 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;
    }
}