如何让我的六边形网格适合所有设备？

Question

我目前正在设计我网站的主页，我想制作一个响应式网站，其中包含 5 个六边形图像，顶部 3 个，底部 2 个。 所以我创建了一个宽度为 90% 和高度为 65vh 的容器，它可以很好地响应不同的屏幕尺寸。 然后我制作了我的 5 个六边形并设置了我的图像的尺寸，它在 chrome 开发人员工具中的移动设备上看起来不错，但你可以看到我的六边形在 ipad 大小的设备上显得更大，并且变得太大了，无法用笔记本电脑和大。 那不是问题，因为我可以通过使用@media 查询来改变它。 然后我决定在我做@media 之前检查所有移动设备的尺寸，它适用于高度大于或等于设备宽度的设备，但如果我的设备宽度大于高度，我的底部 2 个六边形会离开屏幕。 我尝试了不同的方法，但遇到了同样的问题。 就像它们适应屏幕宽度而不是高度的变化一样。

Answer 1

我发现问题是我需要为横向模式设计网站，因为显然较小的高度和较大的宽度是横向的，如果有人偶然发现，我会抛出媒体查询：

@media (max-width: 1024px) and (orientation: landscape)