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

Question

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

这是从桌面 360px 看起来的样子。 非常敏感，请在此处输入图片说明

但是在我的手机上，看起来像这样在此处输入图片说明

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

Answer 1

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

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