设备的最大宽度和元素的相对大小存在问题

问题描述

我对媒体查询有疑问。使用以下HTML和CSS，当窗口缩小到与a-class元素重叠（大致）的程度时，b-class元素应缩小为128px。这可以在我的3000x2000笔记本电脑显示屏上使用，但在横向模式下在我的移动设备上的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);
    }
}