HTML 100% 宽度在手机上溢出 – 为什么？

Question

我创建了这个网站：

https://www.alex-bender.de/ …（正在进行中）

...在 CSS 中，我将页面宽度设置为视口的 100%。 我相信我是照章办事的。

因此，在我的桌面浏览器上，一切都显示正常，即使我将 web 浏览器 window 缩小到可用的最小尺寸。

但是，当我在 Galaxy Flip 4 (Google Chrome) 上观看同一页面时，该页面显示得比视口大。 在 5 个菜单项中，我只看到前 4 个，我必须水平滚动才能看到第 5^个菜单项。

我怎样才能让这个页面在移动设备上正常工作？ 我做错了什么？

Answer 1

您缺少媒体查询。 你应该先做移动，它更容易做。 因此，删除 css 中的所有内容并重新开始，您可以使用开发人员工具在浏览器上设计它：（在 Opera 上，快捷方式是 ctrl + shift + i，在 chrome 上是 ctrl + shift + c）。 这里有一些 w3 可以更好地理解媒体查询： w3schools.com