Блог

У меня проблема с медиа-запросом. Используя следующие HTML и CSS, предполагается, что элемент b-класса сузится до 128 пикселей, когда окно сузится до такой степени, что в противном случае оно перекрывалось бы с элементом a-класса (примерно). Это работает на моем ноутбуке с разрешением экрана 3000×2000, но в Firefox на моем мобильном устройстве в альбомном режиме элементы перекрываются без включения правила медиа-запроса.

Пример кода: codepen.io/krainert/pen/KKzVQLP code below

 <p class="a">Here is a headline</p>
<p class="b">Here is a nav element with several menu items</p>

body, p {
    margin: 0;
    font-family: 'calibri';
}
.a {
    font-size: 50px;
    background-color: blue;
}
.b {
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 24px;
    background-color: red;
}
@media only screen and (max-width: 832px) {
    .b {
        width: 128px;
    }
}
  

Я считаю, что это вызвано несоответствиями между различиями в ширине устройства и относительными размерами элементов экрана на разных устройствах — то есть разница между шириной устройства на мобильном устройстве и на моем ноутбуке больше, чем разница между шириной элементов на мобильном устройстве и на моем ноутбуке относительно размеров их экранов. Или, может быть, я сам себя путаю. Каков наилучший способ это исправить?

Попробуйте ограничить ширину контейнера .a, чтобы они не перекрывались:

 @media only screen and (max-width: 832px) {
    .b {
        width: 128px;
    }
    .a {
        width: calc(100vw - 128px);
    }
}