从手机查看时，媒体查询不适用于页脚部分，但在调整浏览器屏幕大小时有效

Question

我的问题是，从桌面查看时，页脚部分响应非常快，而当我将视窗大小更改为移动和平板电脑时，它仍然有响应。但当我从手机上打开这个应用程序时，页脚看起来没有样式。

这是它从桌面360px看起来的样子。响应速度非常快的enter image description here

但从我的手机上看，这个enter image description here

这是现场直播网站的链接：https://aginamena.github.io/Designo-Multi-Page-Website-/#/这里是github repo：https://github.com/aginamena/Designo-Multi-Page-Website-

Answer 1

这不是一个媒体查询问题，但是页脚容器中的css property - position: absolute正在扰乱Safari浏览器中的对齐方式。我在Desktop Safari responsive design mode和iPhone设备浏览器中看到了你的问题。桌面Chrome和Android设备Chrome浏览器可以很好地加载页脚。

我建议使用position: relative创建一个页脚容器，使用flex创建另一个div，而不使用任何绝对定位。然后根据需要调整边距。