我目前正在设计网站的主页，我想创建一个响应式网站，其中包含5个六边形图像，顶部3个，底部2个。因此，我创建了一个宽度为90％，高度为65vh的容器，它可以很好地响应不同的屏幕尺寸。然后，我制作了5个六边形，并设置了图像的尺寸，在chrome开发工具中的移动设备上看起来不错，但是您可以看到，在ipad尺寸的设备上，我的六边形看起来更大，并且成为笔记本电脑和大。那不是问题，因为我可以使用@media查询来更改它。 然后，我决定在执行@media之前检查所有移动设备的尺寸，它对于高度大于或等于设备宽度的设备非常有用，但是如果我的设备宽度大于高度，则底部2个六边形会离开屏幕。我尝试了不同的方法，但遇到了同样的问题。就像他们根据屏幕宽度的变化而不是高度进行调整一样。
答案 0 :(得分：1)
我发现问题是我需要将网站设计为横向模式，因为显然较小的高度和较大的宽度是横向的，如果有人偶然发现，它将抛出媒体查询：
@media (max-width: 1024px) and (orientation: landscape)