Html 如何使六边形网格适合所有设备？
我目前正在设计我的网站主页，我想做一个有5个六边形图像，3个在顶部，2个在底部的响应网站。所以我创建了一个宽度为90%，高度为65vh的容器，它可以很好地响应不同的屏幕大小。然后我制作了我的5个六边形，并为我的图像设置了尺寸。在chrome开发者工具中，它在移动设备上看起来不错，但你可以看到我的六边形在ipad大小的设备上看起来更大，对于笔记本电脑和更大的设备来说，这是一个不容忽视的问题。这不是问题所在，因为我可以通过使用@media查询来改变这一点。Html 如何使六边形网格适合所有设备？,html,css,Html,Css,我目前正在设计我的网站主页，我想做一个有5个六边形图像，3个在顶部，2个在底部的响应网站。所以我创建了一个宽度为90%，高度为65vh的容器，它可以很好地响应不同的屏幕大小。然后我制作了我的5个六边形，并为我的图像设置了尺寸。在chrome开发者工具中，它在移动设备上看起来不错，但你可以看到我的六边形在ipad大小的设备上看起来更大，对于笔记本电脑和更大的设备来说，这是一个不容忽视的问题。这不是问题所在，因为我可以通过使用@media查询来改变这一点。 然后，我决定在使用@media之前检查所有
然后，我决定在使用@media之前检查所有移动设备的尺寸，这对于高度大于或等于设备宽度的设备非常有效，但如果我的设备宽度大于高度，我的底部2个六边形将离开屏幕。我尝试过不同的方法，我遇到了同样的问题。这就像他们根据屏幕宽度而不是高度的变化进行调整一样。我发现问题在于我需要为横向模式设计网站，因为很明显，越高越宽的网站就是横向模式，我会抛出媒体查询，以防有人发现它：
@media（最大宽度：1024px）和（方向：横向）