如何解决设备的最大宽度和元素的相对大小存在问题
我对媒体查询有疑问。使用以下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);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。