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

Question

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

这是从桌面 360px 看的样子。非常敏感 在此处输入图像描述

但在我的手机上，看起来像这样 在此处输入图像描述

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

标签： javascripthtmlcssreactjssass

Answer 1

这不是媒体查询问题，而是 css 属性 -position: absolute在页脚容器中弄乱了 Safari 浏览器中的对齐方式。我在桌面 Safari 响应式设计模式和 iPhone 设备 Safari 浏览器中看到了您的问题。桌面 Chrome 和 Android 设备 Chrome 浏览器可以正常加载页脚。

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