html - CSS 中的背景图像在移动设备上不正确

Question

我对 HTML/CSS 非常陌生，并尝试通过制作一些基本网站来练习。

我的网站的桌面版本看起来不错，当我在 Chrome 中检查它时，移动版本看起来不错，但是当我实际使用移动设备时，图像并没有拉伸以调整视口的大小。通过尝试修复它，我不断地打破它，所以我真的很感激一些帮助。

我试图搜索这个问题，但我找到的解决方案告诉我使用background-size: cover我已经在做的事情。我尝试将主体更改为body {width: 100vw; height: 100vh;}以及此处关于取出height: 90vh和留下背景覆盖和宽度的建议，但这将其减小到 div 线的大小，这太小了。我觉得这个带有媒体查询的解决方案很接近，但我无法弄清楚。

这是 repo，这里是 GitHub 页面，您可以在其中查看它。先感谢您！

桌面：

检查员：

移动的：

标签： htmlcssimagemobilebackground

Answer 1

无论如何都要background-position:center center; 小心固定背景，这会导致移动设备性能出现巨大问题